如何在单击(活动)时更改图像的颜色，以及如何在单击另一个图像时将其还原

Question

我有两个文件夹在我的图像文件夹。这两个文件夹是enableState和activeState。enableState文件夹有白色图像(总共有8个图像)，另一个文件夹有橙色图像(总共有8个图像)。

我让sideNav出现在屏幕上。页面加载后，所有白色图像都将显示出来。当用户点击第一个图像(白色)，它将变得活跃，并变成橙色。

但我的问题是，当用户单击第二个图像时，第一个图像仍然处于活动状态(橙色)。当用户单击列表中的任何其他图像(现在其他单击的图像是橙色的)时，我希望第一个图像是白色的。

• 。 在这个例子中，我只拍摄了3张图片。 以下是我的HTML代码：

Answer 1

​

$("img").click(function() {

var allImg = $('img')
  

   $(allImg).attr('src','https://images.pexels.com/photos/556416/pexels-photo-556416.jpeg');    
      
      $(this).attr('src','https://cdn.pixabay.com/photo/2016/11/29/04/19/beach-1867285_960_720.jpg');
     
});

li img { max-width:80px}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="slide-out" class="col s2 m2 l2 sidenav sideNavBar">
<li><img src="https://images.pexels.com/photos/556416/pexels-photo-556416.jpeg" alt="G-Symbol" class="gSymbol_enable active"/>
</li>
<li><img src="https://images.pexels.com/photos/556416/pexels-photo-556416.jpeg" alt="commune" class="commune_enable"/>
</li>
<li><img src="https://images.pexels.com/photos/556416/pexels-photo-556416.jpeg" alt="couplerhub" class="couplerHub_enable"/>
</li>
<ul>

​

嘿你能检查一下这是否符合你的要求。让我知道。

Answer 2

Here is my HTML code. I have renamed images as _on for activeState and _off for enableState. For example gsymbol.svg as (gsymbol_on.svg, gsymbol_off.svg).

<ul id="slide-out" class="col s2 m2 l2 sidenav sideNavBar">
<li><img src="/images/baseTemplate/enableState/gsymbol_off.svg" alt="G-Symbol" class="gSymbol_enable active"/>
</li>
<li><img src="/images/baseTemplate/enableState/commune_off.svg" alt="commune" class="commune_enable"/>
</li>
<li><img src="/images/baseTemplate/enableState/couplerhub_off.svg" alt="couplerhub" class="couplerHub_enable"/>
</li>
<ul>

Here is my JS code :

$(" .sidenav > li > img").click(function () {
  var allImg = $('.sidenav > li > img')
  $('.sidenav').children('li').children('img').map(function () {
  var allImgs = $(this).attr('src');
  allImgs = allImgs.replace("activeState", "enableState");
  allImgs = allImgs.replace("on", "off");
  $(this).attr('src', allImgs)
  }).get();

  var imgSrc = $(this).attr('src');
  imgSrc = imgSrc.replace("off", "on");
  imgSrc = imgSrc.replace("enableState", "activeState");
  $(this).attr('src', imgSrc);
});

This code makes the clicked image as active(orange) and rests as disabled(white).