jQuery“ .on（'click'）”事件仅工作一次。 图像滑块

Question

I've been looking for a solution that I couldn't find.

I built a simple image slider where every time you click on the picture this should change with the follow one. Specifically, on-click event move the css property z-index to the next picture using addClass and removeClass.

The problem is that it works only the first time you press on and never again, this means I can show only the first and the second picture. I cannot find solution, what I'm looking for is just how to get the on-click event work every time I click on the picture?

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

 .active {z-index: 10;} 

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

Answer 1

1. currentImg = $(".active"); nextImg = currentImg.next(); should be placed in function
2. removeClass(".active") => removeClass("active") . addClass(".active") => addClass("active")
3. next() is a problem.

Except z-index, you can try another attribute -- opacity.