时间戳

首页 > 解决方案 > 如何通过从数组中获取 id 来更改 img src？

javascript - 如何通过从数组中获取 id 来更改 img src？

问题描述

当单击按钮时，我在获取 itemIMG 中的属性以更改时遇到了麻烦。

这是我的js中的代码，它在一个循环中：

$("#btnitemIMGcolour").click(function(){
    $("#itemIMG").attr("src", serverURL() + "/images/" + arr[i].itemColour);
}

这是功能 window.location 的按钮的代码：

$('#btnitemIMGcolour' + arr[i].colourID).bind("click", {id1: arr[i].itemID, id2: arr[i].colourID}, function (event) { //This line of code create a button and has an event listener
     var data = event.data;
     displayothercolour(data.id1, data.id2); // Call shoecat function
});

function displayothercolour(itemID,colourID) {
   window.location = "itemdetail.html?itemID=" + itemID + "&colourID=" + colourID;
   localStorage.setItem("colourID", colourID);
}

代码有效，但是图像当前仅显示插入数据库中的最新图像。

完整的循环如下所示：

function _getitemcolour(arr) {
    var i;
    for (i = 0; i < arr.length; i++) {
        $("#btnitemIMGcolour").click(function () {
            $("#itemIMG").attr("src", serverURL() + "/images/" + arr[i].itemColour);
        }
        var t;
        t = "<a href='#' id='btnitemIMGcolour" + arr[i].colourID + "'> <img src='" + serverURL() + "/images/" + arr[i].itemColour + "' class='itemIMGcolour'>";
        $("#itemIMGcolour").append(t);
        $('#btnitemIMGcolour' + arr[i].colourID).bind("click", { id1: arr[i].itemID, id2: arr[i].colourID }, function (event) { //This line of code create a button and has an event listener
            var data = event.data;
            displayothercolour(data.id1, data.id2); // Call shoecat function
        });
    }
}

function displayothercolour(itemID, colourID) {
    window.location = "itemdetail.html?itemID=" + itemID + "&colourID=" + colourID;
    localStorage.setItem("colourID", colourID);
}

标签： javascriptjquery

解决方案

欢迎来到堆栈溢出！:)

所以，首先你有一个小的语法错误6，即你的代码缺少封闭的')'（括号）。所以整个部分应该是这样的：

$("#btnitemIMGcolour").click(function () {
     $("#itemIMG").attr("src", serverURL() + "/images/" + arr[i].itemColour);
})

其次。将变量声明和初始化分开是没有意义的——你可以同时做这两个。例如，而不是这个：

var i;
for (i = 0; i < arr.length; i++) {
    /* Rest of the code */
}

你可以简单地这样做：

for (var i = 0; i < arr.length; i++) {
    /* Rest of the code */
}

变量“t”也可以做到这一点。最后说到重点。img.src由于称为闭包的东西，您总是包含相同的值。无需详细说明：当您在函数内部创建函数时，子函数中使用的父函数中的变量不会复制到子函数，但它们会被引用，就像在该函数内部声明一样。让我们考虑下面的例子：

var value = 0;
var counter1 = function() {
    value = value + 1;
    return value;
};
var counter2 = function() {
    value = value + 1;
    return value;
};
counter1(); // returns 1
counter2(); // returns 2
counter1(); // returns 3
counter2(); // returns 4

每当调用 acounter1或counter2函数时，它们都会更新并返回同一变量的值 - 这是因为该变量在函数中被引用，而不是其值被简单地复制到这些函数中。在您的代码中也会发生同样的情况 -click处理程序引用该i变量，因此当它作为点击事件的结果最终被调用时，它使用i等于最后一个元素的索引的“当前”（或实际上是最后一个）值在一个数组中。

为了克服这个问题，你可以简单地创建另一个函数，它接受一个值arr[i]作为参数并执行里面的所有操作：

function bindEvents(item) {
    $("#btnitemIMGcolour").click(function () {
        $("#itemIMG").attr("src", serverURL() + "/images/" + item.itemColour);
    });
    var t = "<a href='#' id='btnitemIMGcolour" + item.colourID + "'> <img src='" + serverURL() + "/images/" + item.itemColour + "' class='itemIMGcolour'>";
    $("#itemIMGcolour").append(t);
    $('#btnitemIMGcolour' + item.colourID).bind("click", { id1: item.itemID, id2: item.colourID }, function (event) { //This line of code create a button and has an event listener
        var data = event.data;
        displayothercolour(data.id1, data.id2); // Call shoecat function
    });
}

function _getitemcolour(arr) {
    for (var i = 0; i < arr.length; i++) {
        bindEvents(arr[i]);
    }
}

更多关于闭包的信息：https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

更多关于闭包和循环的信息：循环内的 JavaScript 闭包——简单实用的例子

推荐阅读