jQuery ".on('click')" 事件只工作一次。图像滑块

Question

我一直在寻找一个我找不到的解决方案。

我构建了一个简单的图像滑块，每次单击图片时，它都会随着后续图片的变化而变化。具体来说，on-click 事件使用 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，你可以试试另一个属性——不透明度。