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

Question

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

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

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

这是按钮功能窗口的代码。位置：

$('#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变量，因此当它作为单击事件的结果最终被调用时，它使用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闭包——的简单实用示例