javascript - Onclick 启用单击的图像并禁用其他图像

Question

我想使用 Javascript onclick 创建一个事件，该事件将启用单击的图像并禁用其他图像。

例如，如果我有6张图片，我该如何执行以下操作:我想单击任何图片，例如图片3，则图片3将被启用，图片1,2,4,5,6将被禁用。

几秒钟后，我想点击1号图片，然后它将变为事件状态，2、3、4、5、6将被禁用。

我该怎么做？

Answer 1

您可以使用 jQuery Siblings 来执行此操作

这里是一个例子:

$(function(){
  $("img").click(function(){
    $(this).addClass("on").siblings("img").removeClass("on");
  });
});

编辑，工作示例:

$(function(){
  var replaceImg = function($img){ 
    var src0= $img.attr("src");
    var src1= $img.data("on-src");
    $img.attr("src",src1).data("on-src",src0);    
  };
  $("img").click(function(){   
    $(this).addClass("on");
    replaceImg($(this));
    
     $(this).siblings("img").each(
      
     function(){
       var $this = $(this);
        if($this.hasClass("on")){
          $(this).removeClass("on");
          replaceImg($(this));
          }
     }
     );
  });
});

img{border:solid 3px black;}
img.on{border:solid 3px red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>



<div>
 <img src="https://67.media.tumblr.com/avatar_0c16e55c511b_128.png" data-on-src="http://icons.iconarchive.com/icons/jonathan-rey/simpsons/128/Homer-Simpson-04-Happy-icon.png">
 <img src="https://67.media.tumblr.com/avatar_0c16e55c511b_128.png" data-on-src="http://icons.iconarchive.com/icons/jonathan-rey/simpsons/128/Homer-Simpson-04-Happy-icon.png">
   <img src="https://67.media.tumblr.com/avatar_0c16e55c511b_128.png" data-on-src="http://icons.iconarchive.com/icons/jonathan-rey/simpsons/128/Homer-Simpson-04-Happy-icon.png">
   <img src="https://67.media.tumblr.com/avatar_0c16e55c511b_128.png" data-on-src="http://icons.iconarchive.com/icons/jonathan-rey/simpsons/128/Homer-Simpson-04-Happy-icon.png">
   <img src="https://67.media.tumblr.com/avatar_0c16e55c511b_128.png" data-on-src="http://icons.iconarchive.com/icons/jonathan-rey/simpsons/128/Homer-Simpson-04-Happy-icon.png">
</div>

编辑 2 - 更改图像