jQuery“ .on（'click'）”事件僅工作一次。 圖像滑塊

Question

我一直在尋找找不到的解決方案。

我建立了一個簡單的圖像滑塊，每當您單擊圖片時，該滑塊就會隨着下一個變化。 具體來說，單擊事件使用addClass和removeClass將css屬性z-index移動到下一張圖片。

問題在於它僅在您第一次按下時起作用，並且再也不會起作用，這意味着我只能顯示第一張和第二張圖片。 我找不到解決方案，我要尋找的只是每次單擊圖片時如何使點擊事件起作用？

 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(); 應該放在功能上
2. removeClass(".active") => removeClass("active") 。 addClass(".active") => addClass("active")
3. next（）是一個問題。

除z-index外，您可以嘗試另一個屬性-不透明度。