Question

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

例如，如果我有6张图片，我该怎么办？我想点击任何图片，例如图片编号3，然后图片编号3将被启用，图片1,2,4,5,6将被禁用。

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

我该怎么做？

Answer 1

执行此操作

这是一个例子：

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

编辑，工作示例：

＆＃13;

$(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));
          }
     }
     );
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

编辑2 - 用于更改图像

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

1 个答案: