Question

我正在使用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中设置.saturate样式，这是它获得80％额外饱和度的地方）。从class="saturate"移除<li><img id="one"后，此效果仍然有效..我真的不明白。

Answer 1

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

应用该类的任何元素（例如class="saturate"）都会产生效果。

如果我正确理解了您的JavaScript，它所做的就是在单击元素时添加或删除该类。

空字符串（current.className = ""）只是从元素中删除所有CSS类的一种方法。因此，如果用户点击已经拥有CSS类的元素（例如class="saturate"），则该类将被删除，从而消除效果。

您问为什么当您从元素的标记中删除class="saturate"时效果仍然有效。这是因为单击该元素将重新应用该类，如上所述。

Answer 2

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

在此处指定单击图像（onclick）时，将调用saturate()函数。使用所谓的参数调用该函数，即this。在此上下文中，this指的是被点击的元素，即<img>元素。

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

function saturate(now) { … }

该函数使用一个名为now的参数定义。这意味着以前传递给函数的参数（this，即被点击的<img>）现在可以通过名称now访问。因此，如果我们在此功能中，并且我们谈论now，那么我们实际上是指点击的<img>。

现在让我们跳过几行，我们稍后再回过头来看。

now.className = "saturate";

我们在此处所说的是className now <img>} saturate应成为<img class="saturate">。这类似于手动添加类，如下所示：saturate。您的文档可能包含一些CSS，它为.saturate类指定了一些内容（在CSS中查找current = now;）。运行此行代码后，该CSS将应用于图像。

current

此行表示我们将使用名为now的新名称，该名称与now相同。由于<img>引用了刚刚点击的current，current现在将引用相同的图片。

因为变量current是在函数之外定义的（在你的第一行JavaScript中），所以它是一个所谓的全局变量。这意味着current将永远存在，也可以在此函数执行完毕后存在。因此，只要我们不更改<img>，它就会继续引用点击的<img>。

现在假设您点击了另一个if (current != null) { current.className = ""; }。同样的情况如上所述，但我们现在看一下我刚刚跳过的行：

saturate()

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

我们在此处看到的是，我们首先使用if (current != null)检查current是否为空。由于我们知道<img>是指我们之前点击过的current.className = ""，因此我们知道它不是空的。

然后执行下一行：className。此行将current <img>（实际上是之前点击的saturate）更改为空。换句话说，它删除了我们之前单击<img>时应用的<img>类。那么<img>现在将不再饱和。

在此之后，执行其他两行，导致新点击的current变为饱和并被分配到{{1}}。

使用className和空字符串（“”）。

2 个答案: