Question

我的图像文件夹中有2个文件夹。这两个文件夹是enableState和activeState。 enableState文件夹具有白色图像（总共8张图像），另一个文件夹具有橙色图像（总共8张图像）。

我的sideNav出现在屏幕上。页面加载后，将显示所有白色图像。当用户单击第一幅图像（白色）时，它将变为活动状态，并变为橙色。

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

。

在此示例中，我仅拍摄了3张图像。

这是我的HTML代码：

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

这是我的JS代码：

$("img").click(function() {
      alert("image");
      if ($(this).hasClass("gSymbol_enable")) {
      this.src = this.src.replace("/images/baseTemplate/enableState","/images/baseTemplate/activeState");
      } 
      else if($(this).hasClass("commune_enable")){
      this.src = this.src.replace("/images/baseTemplate/enableState","/images/baseTemplate/activeState");
      }
});

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).

如何在点击（活动）时更改图片的颜色，以及如何在点击另一张图片时将其还原

2 个答案: