点击图片修改输入框值：基于数组数据的前端实现问题

你的代码目前有两个核心问题：

• 点击图片时没有传递当前图片对应的数组索引，导致Linkcreator函数不知道要取哪条数据
• Linkcreator里的循环会把所有链接都赋值一遍，最终输入框只会保留最后一条链接的值

下面给你两种可行的修改方案：

方案1：给点击事件传递索引参数 #

直接在生成图片时把当前循环的索引传给点击函数，函数里根据索引取对应链接：

修改后的JS代码：

var items = [
  ['img1.jpg', 'car1', 'link1'],
  ['img2.jpg', 'car2', 'link2'],
  ['img3.jpg', 'car3', 'link3'],
  ['img4.jpg', 'car4', 'link4'],
];

var copyText = document.getElementById("text-copy");

// 循环生成图片，去掉多余的</div>，并给onclick传当前索引i
for (let i = 0; i < items.length; i++) {
  var e = '<img class="img_game_selector" src="' + items[i][0] + '" tabindex="0" onclick="Linkcreator(' + i + ')">';
  $(".image_container").append(e);
}

// 接收索引参数，直接赋值对应链接
function Linkcreator(index) {
  copyText.value = items[index][2];
}

方案2：使用事件委托（更推荐） #

不需要给每个图片单独绑定点击事件，而是给父容器image_container绑定一个点击事件，通过事件对象找到被点击的图片，再获取对应的数据。这种方式更高效，尤其当图片数量多的时候：

修改后的JS代码：

var items = [
  ['img1.jpg', 'car1', 'link1'],
  ['img2.jpg', 'car2', 'link2'],
  ['img3.jpg', 'car3', 'link3'],
  ['img4.jpg', 'car4', 'link4'],
];

var copyText = document.getElementById("text-copy");
var imageContainer = $(".image_container");

// 循环生成图片，给每个图片添加data-index存储对应数组索引
for (let i = 0; i < items.length; i++) {
  var e = '<img class="img_game_selector" src="' + items[i][0] + '" tabindex="0" data-index="' + i + '">';
  imageContainer.append(e);
}

// 给父容器绑定点击事件，使用事件委托
imageContainer.on('click', '.img_game_selector', function() {
  // 获取当前图片对应的索引
  const index = this.dataset.index;
  // 赋值对应链接
  copyText.value = items[index][2];
});

两种方案都能解决你的问题，方案2更符合现代前端的事件绑定规范，避免重复绑定事件。

内容的提问来源于stack exchange，提问作者VaruCostel