如何实现动态按钮数组，点击时根据对象数组切换图片src？

我是JavaScript新手，正在摸索相关功能，知识储备有限，若表述有误敬请谅解。我想要实现一个动态系统：根据对象数组的长度生成对应数量的按钮，每个按钮点击时能将图片的src切换为数组中对应项的url。

示例效果：

• 默认按钮 → 将图片src改为默认变量（默认url）
• 数组按钮#1 → 将图片src改为数组变量#1
• 数组按钮#2 → 将图片src改为数组变量#2
• 依此类推...

我的现有代码如下：

HTML代码 #

<img src="#" id="diplayimg">
<div class="charskins">
  <p><span id="data_skins"></span></p>
</div>

JavaScript代码 #

//this is the default src the image is going to have
let diplayimgPath = 'imagedef.png';

//name = text displayed on the new button and url = the new src of the image
let skinsData = {
  skins: [
    { name: 'Skin 0', url: 'image1.png' },
    { name: 'Skin 1', url: 'image2.png' }
    //Note that there can be added as many arrays of objects as I like here
  ]
}

let defaultskin = '<button onclick="changeSkinDef()">Default</button>';

function changeSkinDef() {
  document.getElementById("diplayimg").src = diplayimgPath;
}

if (document.getElementById("data_skins")) {
  function changeSkinNew() {
    skinspathFinal = '';
    for (let i = 0; i < skinsData.skins.length; i++) {
      let skinimg = document.getElementById("diplayimg");
      skinimg.setAttribute("src", skinsData.skins[i].url);
      skinspathFinal += skinimg;
    }
    return skinspathFinal;
  }

  function printSkins(){
    let skinsFinal = '';
    for (let i = 0; i < skinsData.skins.length; i++) {
      skinsFinal += '<button onclick="changeSkinNew()">' + skinsData.skins[i].name + '</button>';
    }
    return defaultskin + skinsFinal;
  }
  document.getElementById("data_skins").innerHTML= printSkins();
}

当前问题 #

按钮能正常生成并显示对应名称，图片的新url也能被正确读取，但所有新按钮点击后只会将图片src切换到对象数组中的某一个特定url。

示例：

• 数组按钮#1 → 将src改为变量#1
• 数组按钮#2 → 仍将src改为变量#1

我认为问题出在changeSkinNew()函数，所有新按钮都触发同一个函数，但不知道如何让函数也实现动态适配。请问有什么解决办法？

附：我曾尝试使用forEach和createElement方法手动创建按钮，但也未成功。

问题根源 #

你的changeSkinNew()函数里做了全数组遍历，会依次设置所有皮肤的url，最后一次循环会把图片src固定为数组最后一个元素的地址；同时所有按钮都调用这个无参数函数，无法区分点击的是对应哪一项。

方法一：修改字符串拼接，给函数传递索引参数 #

直接调整按钮生成逻辑，在onclick事件中传递当前项的索引，同时重写changeSkinNew函数接收索引参数：

// 默认图片地址
let diplayimgPath = 'imagedef.png';

// 皮肤数据
let skinsData = {
  skins: [
    { name: 'Skin 0', url: 'image1.png' },
    { name: 'Skin 1', url: 'image2.png' }
    // 可继续添加更多皮肤项
  ]
}

let defaultskin = '<button onclick="changeSkinDef()">Default</button>';

// 默认皮肤切换函数
function changeSkinDef() {
  document.getElementById("diplayimg").src = diplayimgPath;
}

// 修改后的皮肤切换函数，接收索引参数
function changeSkinNew(index) {
  const img = document.getElementById("diplayimg");
  img.src = skinsData.skins[index].url;
}

if (document.getElementById("data_skins")) {
  function printSkins(){
    let skinsFinal = '';
    for (let i = 0; i < skinsData.skins.length; i++) {
      // 在onclick中传递当前项的索引i
      skinsFinal += `<button onclick="changeSkinNew(${i})">${skinsData.skins[i].name}</button>`;
    }
    return defaultskin + skinsFinal;
  }
  document.getElementById("data_skins").innerHTML= printSkins();
}

方法二：使用createElement创建按钮（更推荐的原生写法） #

你之前尝试createElement失败，大概率是事件绑定的方式有误。这种写法利用闭包特性，能确保每个按钮正确绑定对应皮肤的url：

// 默认图片地址
let diplayimgPath = 'imagedef.png';

// 皮肤数据
let skinsData = {
  skins: [
    { name: 'Skin 0', url: 'image1.png' },
    { name: 'Skin 1', url: 'image2.png' }
    // 可继续添加更多皮肤项
  ]
}

// 获取DOM元素
const imgElement = document.getElementById("diplayimg");
const skinsContainer = document.getElementById("data_skins");

// 创建默认按钮
const defaultBtn = document.createElement('button');
defaultBtn.textContent = 'Default';
defaultBtn.addEventListener('click', () => {
  imgElement.src = diplayimgPath;
});
skinsContainer.appendChild(defaultBtn);

// 遍历生成皮肤按钮
skinsData.skins.forEach(skin => {
  const btn = document.createElement('button');
  btn.textContent = skin.name;
  // 绑定点击事件，直接使用当前循环的skin对象
  btn.addEventListener('click', () => {
    imgElement.src = skin.url;
  });
  skinsContainer.appendChild(btn);
});

这种写法避免了字符串拼接的潜在问题，逻辑更清晰，也不会出现索引混乱的情况。

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