fadeOutクリックされていない画像

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を追加し、すべての画像とのforeach画像チェックを読ん要件、それがフェードアウトしている要素は取り戻すだろうか明らかではないが、可視性を与えられました（hasClass()）​​にクラスactiveそれ：

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

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

<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="https://maxcdn.icons8.com/Share/icon/color/Gaming//pokecoin1600.png" class="img-responsive img-thumbnail"> 
 
    </div> 
 

 
    <div class="col-md-2"> 
 
     <img src="https://maxcdn.icons8.com/Share/icon/color/Messaging//tongue_out1600.png" class="img-responsive img-thumbnail"> 
 
    </div> 
 

 
    <div class="col-md-2"> 
 
     <img src="https://lh3.googleusercontent.com/gN6iBKP1b2GTXZZoCxhyXiYIAh8QJ_8xzlhEK6csyDadA4GdkEdIEy9Bc8s5jozt1g=w300" class="img-responsive img-thumbnail"> 
 
    </div> 
 

 

 
</div>

Answer 3

まず、適切なjqueryの機能を使用してクラスを追加します。次に、jqueryのnotセレクタを使用することをお勧めします。 Jqueryは配列のような要素に対してその関数を実行します。このコードを使用して、それがフェードアウトしますimgているすべての要素を

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

それとも、アクティブなクラスが必要とされない場合は、簡単な解決策は

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

Answer 4

あなたドンだろうactiveクラスなしクラスを追加または削除する必要はありません。あなたは、単にクリックされた画像ではありませんすべての画像をフェードアウト：

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

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