我的click函数只适用于jquery的第一部分，而不适用于第二部分。当它就位时，为什么不让我点击较新的左侧图像

Question

我正在创建一个图像旋转木马，其他图像悬停在聚焦的图像后面。正如您在我的小提琴中看到的那样，当您单击左侧的第一个图像时，单击事件会起作用，但对于出现在那里的下一个图像则不起作用。我到底做错了什么？

我是jquery的新手，我相信有一种更简单的方法可以做到这一点，但我一直在努力解决这个问题，每次都会被难住。这是我的小提琴..。https://jsfiddle.net/hexen77/9xoqLgzs/16/

<div>
  <img id="content-1" class="position-1" src="https://www.gstatic.com/webp/gallery/1.sm.jpg">
  <img id="content-2" class="position-2" src="https://www.gstatic.com/webp/gallery/2.sm.jpg">
  <img id="content-3" class="position-3" src="https://www.gstatic.com/webp/gallery/3.sm.jpg">
  <img id="content-4" class="position-4" src="https://www.gstatic.com/webp/gallery/4.sm.jpg">
</div> 

.position-1 {
    position: absolute;
    left: 30%;
    transform: scale(1.1);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.position-2 {
    opacity: .4;
    position: absolute;
    z-index: -2;
    left: 10%;
}
.position-3 {
    opacity: .4;
    right: 10%;
    position: absolute;
    z-index: -2;
}
.position-4 {
    opacity: 0;
    z-index: -10;
    left: 30%;
    position: absolute;
}

$("#content-2.position-2").click(function() {
  $("#content-2.position-2").addClass(" position-1");
    $("#content-2.position-2").removeClass("position-2 ");
    $("#content-3.position-3").addClass(" position-4");
    $("#content-3.position-3").removeClass("position-3 ");
    $("#content-4.position-4").addClass(" position-2");
    $("#content-4.position-4").removeClass("position-4 ");
    $("#content-1.position-1").addClass(" position-3");
    $("#content-1.position-1").removeClass("position-1 ")
});
$("#content-4.position-2").click(function() {
  $("#content-4.position-2").addClass(" position-1");
    $("#content-4.position-2").removeClass("position-2 ");
    $("#content-2.position-1").addClass(" position-3");
    $("#content-2.position-1").removeClass("position-1 ");
    $("#content-1.position-3").addClass(" position-4");
    $("#content-1.position-3").removeClass("position-3 ");
    $("#content-3.position-4").addClass(" position-2");
    $("#content-3.position-4").removeClass("position-4 ")
});

Answer 1

您需要将事件绑定到文档，因为您正在更改类。

$(document).on("click","#content-2.position-2", function() {
  $("#content-2.position-2").addClass(" position-1");
    $("#content-2.position-2").removeClass("position-2 ");
    $("#content-3.position-3").addClass(" position-4");
    $("#content-3.position-3").removeClass("position-3 ");
    $("#content-4.position-4").addClass(" position-2");
    $("#content-4.position-4").removeClass("position-4 ");
    $("#content-1.position-1").addClass(" position-3");
    $("#content-1.position-1").removeClass("position-1 ")
});
$(document).on("click","#content-4.position-2",function() {
  $("#content-4.position-2").addClass(" position-1");
    $("#content-4.position-2").removeClass("position-2 ");
    $("#content-2.position-1").addClass(" position-3");
    $("#content-2.position-1").removeClass("position-1 ");
    $("#content-1.position-3").addClass(" position-4");
    $("#content-1.position-3").removeClass("position-3 ");
    $("#content-3.position-4").addClass(" position-2");
    $("#content-3.position-4").removeClass("position-4 ")
});

下面是一个有效的Fiddle