使用className和空字符串("")

using className and empty string ("").

本文关键字：quot 字符串 className 使用      更新时间：2023-09-26

我正在使用4个非常相似的图像/图标。当用户单击其中一个图像时，它会变得饱和并高亮显示，直到另一个图像被单击(然后那个图像会饱和并高亮显示)，这一切都是有效的，但由于我在其他地方找到了这个小片段，并且因为我在我的考试项目中使用它，我需要能够解释代码。我很难掌握className属性，同时我也发现在这个例子中它被设置为空字符串(")有点奇怪。

HTML: 

<div id="slideshow">
    <ul>
        <li><img id="one" onclick="saturate(this); display(this);" src="../images/efficiency.png" alt="efficiency"/></li>
        <li><img id="two" onclick="saturate(this); display(this);" src="../images/educated_team.png"></li>
        <li><img id="three" onclick="saturate(this); display(this);" src="../images/profitable_options.png"></li>
        <li><img id="four" onclick="saturate(this); display(this);" src="../images/strategic_solutions.png"></li>
    </ul>

和JS:

 var current = document.getElementById('one');
function saturate(now) {
    if (current != null) {
        current.className = "";
    }
    now.className = "saturate";
    current = now;
}

有谁能用简单的话解释一下这是怎么回事吗?这是如何使它可能只有一个图像饱和在一个时间(很像菜单项保持高亮点击)?此外，now.className = "saturate";做什么?我的意思是，在这种情况下，"饱和"这个词是我自己的功能吗?最初，四个图像中的一个有一个class="saturate"，我随机尝试删除，整个事情仍然有效，所以我认为前面提到的饱和词可能与此有关。(我也样式。饱和度在我的CSS，这是它得到80%额外的饱和度)。从<li><img id="one"中去除class="saturate"后，这种效果如何仍然有效。我真的不明白。

正如您已经提到的，CSS类class saturate用于应用视觉效果。

任何应用了该类的元素(例如class="saturate")都将具有此效果。

如果我对你的JavaScript理解正确的话，它所做的就是在点击元素时添加或删除该CSS类。

空字符串(current.className = "")只是一种从元素中删除所有CSS类的方法。所以，如果用户点击了一个已经有CSS类的元素(例如class="saturate")，这个类就会被移除，从而移除效果。

你问为什么当你从元素的标记中删除class="saturate"时效果仍然有效。这是因为点击这个元素会重新应用这个类，就像我上面描述的那样。

<img … onclick="saturate(this); display(this);" …>

这里指定当单击图像(onclick)时，调用saturate()函数。调用该函数时带有一个所谓的参数，即this。在此上下文中，this指的是被单击的元素，即<img>元素。

现在让我们来看看saturate()函数:

function saturate(now) { … }

函数定义为一个参数，命名为now。这意味着之前传递给函数的参数(this，即单击的<img>)现在可以通过名称now访问。如果我们在这个函数中，我们说的now，实际上是指点击的<img>。

现在让我们跳过几行，我们稍后会回到这个问题。

now.className = "saturate";

我们在这里说的是，now的className (<img>)应该变成saturate。这类似于手动添加类，如:<img class="saturate">。您的文档可能包含一些CSS，它为saturate类指定了一些东西(在您的CSS中查找.saturate)。运行完这行代码后，CSS就应用到图像上了。

current = now;

这一行表示我们将有一个新名称，称为current，它与now指代相同的东西。因为now指向的是刚才点击的<img>，所以current现在指向的是同一张图片。

因为变量current是在函数外部定义的(在JavaScript的第一行中)，所以它是一个所谓的全局变量。这意味着current将永远存在，即使在这个函数完成执行之后。所以只要我们不改变current，它就会一直引用点击的<img>。

现在假设单击另一个<img>。与上面描述的情况相同，但是现在我们来看看我刚刚跳过的行:

if (current != null) {
    current.className = "";
}

(请记住，这些是saturate()函数中的第一行。因此，它们在其他的之前执行。)

我们在这里看到的是，我们首先使用if (current != null)检查current是否为空。因为我们知道current指的是我们之前点击的<img>，所以我们知道它不是空的。

则执行下一行:current.className = ""。这一行将current的className(实际上是前面单击的<img>)更改为空。换句话说，它删除了之前单击<img>时应用的saturate类。因此，<img>现在将不再饱和。

在此之后，执行其他两行，导致新单击的<img>变得饱和并被分配给current。

相关文章：