Question

在单击按钮时，要更改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);
}

Answer 1

欢迎堆栈溢出！：）

因此，首先，您会遇到一个小语法错误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

无论何时调用counter1或counter2函数，它们都会更新并返回同一变量的值-这是因为该变量在函数中被引用它的值可以简单地复制到这些函数中。您的代码中也会发生同样的情况-click处理程序引用了i变量，因此当click事件导致变量最终被调用时，它使用的是“当前”（或实际上是最后一个）值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 closure inside loops – simple practical example

如何通过从数组获取ID获取img src进行更改？

1 个答案: