javascript - 使用 Javascript 使图像饱和 onclick

Question

我正在尝试制作一个简单的界面，其中包含 4 个水平放置的图标(图像)，这些图标或多或少用作菜单。单击 4 个图标中的一个时，该特定图标应保持突出显示(增加饱和度)，而在单击其他图标之一时将失去突出显示，依此类推。 html 标记如下所示:

<ul>
        <li><img onclick="saturate()" src="../images/efficiency.png" alt="efficiency"/></li>
        <li><img onclick="saturate()" src="../images/educated_team.png"></li>
        <li><img onclick="saturate()" src="../images/profitable_options.png"></li>
        <li><img onclick="saturate()" src="../images/strategic_solutions.png"></li>

</ul>

每个图标都配备了一个 onclick 方法来调用我的 javascript 函数，并且它们都没有 id 或类，因为我正在使用

document.getElementsByTagName('li');

现在，我当前的 javascript 函数如下所示:

function saturate() {
    var sat = document.getElementsByTagName('li');

     for(var i = 0; i < sat.length; i = i + 1) {
     sat[i].style.webkitFilter = 'saturate(180%)';
}}

我被告知必须使用 for 循环，因为 getElementsByTagName 返回一个数组。我现在的问题是，当单击其中一个图标时，所有图标都会突出显示。此外，我需要一种方法让饱和度在第二次单击图标时恢复正常。我希望避免使用 jQuery，因为我仍处于学习阶段。

我基本上想知道的是，我如何制作一个适当的功能，允许在单击时一次只突出显示一个图标，以及如何在单击一次图标时删除相同的突出显示更多？

我应该提一下，我已经在一个单独的 CSS 文件中设置了图像的样式，其中它们被设置为具有 100% 的默认饱和度。

我是这个论坛的新手，对于给您带来的不便，我深表歉意。

Answer 1

how can i make a proper function that allows for just a single one of the icons to be highlighted at a time when clicked?

像这样:

...
<li><img id="EducatedTeam" onclick="saturate('EducatedTeam')" src="../images/educated_team.png"></li>
...

和:

function saturate(id) {
  var img = document.getElementById(id);
  img.style.webkitFilter = 'saturate(180%)';
}

基本上，您需要将每个 img 元素连接到特定的处理程序。您可以通过绑定(bind)到所有 img 标签并使用 this 仅作用于更改的元素，或者通过为每个元素分配 ID 并传递它来实现这一点，就像我已经显示在这里。