用于更改多个图像的 img 属性的输入字段

Question

问题：无法单独更改多个图像的属性 src 和 alt。所做的任何更改都会影响之前进行过更改的所有其他图像。

问题：如何优化以下 JS/Jquery 以允许更改多个图像的属性？

在此处查看完整代码：JS Fiddle

$(function () {
    $("#editImage").hide();
    $("img").click(function () {
        var imgChange = this;
        $('#imageAlt').val($(imgChange).attr('alt'));
         $('#imageSrc').val($(imgChange).attr('src'));
        $("#editImage").css({
            top: $(this).offset().top - $('#editImage').height() - 5,
            left: $(this).offset().left
        }).show();
        $("#imageEditDone").click(function () {
            var imgSrc = $("#imageSrc").val();
            var imgAlt = $("#imageAlt").val();
            $(imgChange).attr('src', imgSrc).attr('alt', imgAlt);
        });           
    });
});
$("#imageEditDone").click(function () {
    $("#editImage").hide();
});

Answer 1

您在另一个单击处理程序中重复绑定一个单击处理程序，这是一个禁忌。此外，您需要更改 imgChange 变量的范围。试试：

var imgChange;
$(function () {
    $("#editImage").hide();
    $("img").click(function () {
        imgChange = this;
        $('#imageAlt').val($(imgChange).attr('alt'));
        $('#imageSrc').val($(imgChange).attr('src'));
        $("#editImage").css({
            top: $(this).offset().top - $('#editImage').height() - 5,
            left: $(this).offset().left
        }).show();
        $("#imageSrc").text(imgChange.attr('alt', this));
    });
});
$("#imageEditDone").click(function () {
    $("#editImage").hide();
    var imgSrc = $("#imageSrc").val();
    var imgAlt = $("#imageAlt").val();
    $(imgChange).attr('src', imgSrc).attr('alt', imgAlt);
});

jsFiddle example

我只是不确定您要对$("#imageSrc").text(imgChange.attr('alt', this)); 行做什么，尽管它不会影响答案。