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));行做什么，尽管它不会影响答案。

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

1 个答案: