jquery - 我的点击功能仅适用于 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 ")
});

标签： jquery

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 ")
});

这是一个工作小提琴