jQuery ".on（ 'click'）"イベントは1回だけ動作します。 Image Slider

Question

私が見つけられなかった解決策を探してきました。

画像をクリックするたびに次のように変更する必要がある簡単な画像スライダーを作成しました。具体的には、on-clickイベントで、addClassとremoveClassを使用して、cssプロパティのz-indexを次のピクチャに移動します。

初めて問題が発生するのは初めての場合のみです。もう一度やり直さないと、最初と2番目の画像だけを表示できます。私は解決策を見つけることができませんが、私が探しているのは、クリックするたびにクリックするイベントをクリックする方法です。

var currentImg = $(".active"); 
 
var nextImg = currentImg.next(); 
 

 
$(".imageSlider").on("click", function() { 
 
\t alert("ciao"); 
 
\t currentImg.removeClass(".active").css("z-index", 0); 
 
\t nextImg.addClass(".active").css("z-index", 10); 
 
});

.active \t \t {z-index: 10;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="imageSlider"> 
 
\t <div class="images"> 
 
\t \t <img src="JLT1.jpg" class="active" height="500px" width="700px"> 
 
\t \t <img src="JLT2.jpg" height="500px" width="700px"> 
 
\t \t <img src="JLT3.jpg" height="500px" width="700px"> 
 
\t \t <img src="JLT4.jpg" height="500px" width="700px"> 
 
\t </div> 
 
</div>

Answer 1

1. currentImg = $(".active"); nextImg = currentImg.next();機能
2. removeClass(".active") =>removeClass("active")に置かれるべきです。 addClass(".active") => addClass("active")
3. next（）が問題です。

z-indexを除いて、別の属性 - 不透明度を試すことができます。