javascript - 单击按钮时增加计数器值，然后重新使用值

Question

我显示了三张照片，“photo0”、“photo1”、“photo2”，我正在尝试点击中间的照片将显示的照片更改为“photo1”、“photo2” ，“照片3”。我不确定为什么这段代码不能解决问题。

我添加了一个文本框只是为了显示我的柜台发生了什么。当我点击中间的照片后一切正常，照片发生变化并且计数器的值变为 2，但是当我再次点击中间的照片时没有任何反应。

var counter = $('#TextBox').val(); //Initial value of TextBox is 1

$("#middle_photo").click(function() {
    $("#left_photo").replaceWith('<img id="left_photo" src="photo'+counter+'.jpeg" />');
    counter++;

    $("#middle_photo").replaceWith('<img id="middle_photo" src="photo'+counter+'.jpeg" />');
    counter++;

    $("#right_photo").replaceWith('<img id="right_photo" src="photo'+counter+'.jpeg" />');
    counter--;

    $('#TextBox').val(counter);

});

Answer 1

第一次点击:

一切正常，因为您的代码正常运行并且事件在点击时触发。

之后:

click 事件没有绑定(bind)到新替换的元素，所以你应该 .on like

$(document).on("click", "#middle_photo", function() {
    $("#left_photo").replaceWith('<img id="left_photo" src="photo'+counter+'.jpeg" />');
    counter++;

    $("#middle_photo").replaceWith('<img id="middle_photo" src="photo'+counter+'.jpeg" />');
    counter++;

    $("#right_photo").replaceWith('<img id="right_photo" src="photo'+counter+'.jpeg" />');
    counter--;

    $('#TextBox').val(counter);
});

但是你应该这样做

$("#middle_photo").click(function() {
    $("#left_photo").attr("src", 'photo'+ ++counter +'.jpeg');
    $("#middle_photo").attr("src", 'photo'+ ++counter +'.jpeg');
    $("#right_photo").attr("src", 'photo'+ ++counter +'.jpeg');
    $('#TextBox').val(--counter);
});

在这个实现中，您没有在 DOM 中添加和删除任何元素，因此更加高效并且它的短并且在我看来它看起来漂亮!