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")
})

Answer 2

首先为点击的图片添加课程active然后阅读所有图片并预览图片，检查它是否包含（hasClass()）课程active至{{ 1}}它：

＆＃13;

fadeOut()

＆＃13;

$("img").click(function(){
  $(this).addClass("active");
  $("img").each(function(){
    if(!$(this).hasClass("active")){$(this).fadeOut("slow");}
  })
});

＆＃13;

img{
width:32px;
height:32px
}

＆＃13;

Answer 3

首先，使用适当的jquery函数添加类。然后，我建议使用jquery中的not选择器。 Jquery在类似数组的元素上执行其函数。使用此代码，它会淡出img所有不带active类的元素

$("img").click(function(){
  $(this).addClass("active");
  $("img:not(.active)").fadeOut("slow");
});

或者，如果不需要活动类，那么一个简单的解决方案就是

$("img").click(function(){
  $("img").not(this).fadeOut("slow");
});

Answer 4

您不需要添加或删除任何课程。您只需淡出所有不是点击图像的图像：

＆＃13;

$("img").click(function() {
  $("img").not(this).fadeOut("slow");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

＆＃13;

fadeOut未点击的图像

4 个答案: