javascript - 未被点击的淡出图像

Question

我有一个图片库。我想要实现的目标非常简单——用户点击的任何图像都将保留在页面上，而其余图像将淡出。我试图通过向点击的图像添加一个类来实现这一点，然后通过它没有该类的事实来定位未点击的图像。但是，我似乎没有收到任何响应，因为当我点击图片时实际上什么也没有发生。

HTML:

<div class="row text-center famImages">

    <div class="col-md-2">
        <img src="images/1.jpg" class="img-responsive img-thumbnail">
    </div>

    <div class="col-md-2">
        <img src="images/2.jpg" class="img-responsive img-thumbnail">
    </div>

    <div class="col-md-2">
        <img src="images/3.jpg" class="img-responsive img-thumbnail">
    </div>

        <div class="col-md-2">
        <img src="images/4.jpg" class="img-responsive img-thumbnail">
    </div>

    <div class="col-md-2">
        <img src="images/5.jpg" class="img-responsive img-thumbnail">
    </div>

    <div class="col-md-2">
        <img src="images/6.jpg" class="img-responsive img-thumbnail">
    </div>

</div>

JS/JQUERY:

$("img").click(function(){
  $(this).attr("class","active"){
   if(!$("img").hasClass("active")){
   !$("img").hasClass("active").fadeOut("slow");
}

}

})

Answer 1

您可以使用 .not() 从选择中排除元素。请注意，根据要求，尚不清楚已淡出的元素如何重新获得可见性

$(".img-responsive").on("click", function() {
  $(this).addClass("active");
  $(".img-responsive").not(this).removeClass("active").fadeOut("slow")
})