Question

我正在尝试创建一个简单的界面，其中包含4个水平放置的图标（图像），或多或少作为菜单。单击4个图标中的1个时，该特定图标应保持突出显示（增加饱和度），同时在单击其中一个图标时丢失其突出显示，等等。 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

如何制作一个合适的功能，只允许在点击时突出显示一个图标？

像这样：

...
<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元素连接到特定的处理程序。您可以通过绑定到所有img标记并使用this仅对更改的元素进行操作，或者通过为每个标记分配ID并传递它来实现此目的，如我在此处所示。

Answer 2

我会在LI上使用一些css类来表示饱和度。

.sat{
 -webkit-filter: saturate(180%);
}

function saturate()
{
  var parentUl = this.parentNode.parentNode; //this sets you at the ul
  var lis = parentUl.getElementsByTagName("li");
  // clear the class
  for(var i = 0; i < lis.length; i++)
  {
     lis[i].className = "";
  }
  //set the one you want
  this.parentNode.className='sat';
}

如果您使用的是IE9 +，只需将getElementsByTagName换成getElementsByClassName即可获得较小的收藏。

使用Javascript点击饱和图像

2 个答案: