Question

我有三张照片显示，＆＃34; photo0＆＃34;，＆＃34; photo1＆＃34;，＆＃34; photo2＆＃34;，我试图制作它因此，点击中间照片会将显示的照片更改为＆＃34; photo1＆＃34;，＆＃34; photo2＆＃34;，＆＃34; photo3＆＃34;。我不确定为什么这段代码不能解决问题。

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

proc on_button_press {seconds} {
    after idle [list progressbar $seconds]
    after idle [list run_structural_comparision]
}

Answer 1

首次点击：

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

之后：

click事件未绑定到新替换的元素，因此您应该.on喜欢

$(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中的任何元素，因此更多高效及其简短，它看起来像漂亮给我！

Answer 2

重写

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

$("#middle_photo").click(function() {

    $("#left_photo").attr('src',"photo"+counter+".jpeg");
    counter++;

    $("#middle_photo").attr('src',"photo"+counter+".jpeg")
    counter++;

    $("#right_photo").attr('src',"photo"+counter+".jpeg");
    counter--;

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

});

感谢@ A.Wolff提供指导

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

2 个答案: