JavaScript如何向HTML标签内onclick绑定的函数传递map遍历的item变量

核心修改逻辑 #

你需要在模板字符串拼接onclick事件时，将当前遍历的item对象序列化后传入函数，避免直接插入对象变成[object Object]的问题，同时修正你原有代码的几处隐含错误即可：

1. 修改map渲染的模板代码 #

这里提供两种更简洁的传参写法，任选一种即可：

• 写法1：用单引号包裹onclick属性，无需转义双引号

document.getElementById("Que_list").innerHTML = surQue
  .map(
    (item) =>
      `<div>
        <p class="ques">${item.question}</p>
      <div class="str">
            <img onClick='rate(${JSON.stringify(item)})'  class="star" id="1${item.idsurveyquestion}" src=${starImgpath} />
            <img onClick='rate(${JSON.stringify(item)})'  class="star" id="2${item.idsurveyquestion}" src=${starImgpath} />
            <img onClick='rate(${JSON.stringify(item)})'  class="star" id="3${item.idsurveyquestion}" src=${starImgpath} />
            <img onClick='rate(${JSON.stringify(item)})'  class="star" id="4${item.idsurveyquestion}" src=${starImgpath} />
            <img onClick='rate(${JSON.stringify(item)})'  class="star" id="5${item.idsurveyquestion}" src=${starImgpath} />
        </div>
    </div>`
  )
  .join("");

• 写法2：保持双引号包裹onclick属性，对序列化后的双引号做HTML转义

<img onClick="rate(${JSON.stringify(item).replace(/"/g, '&quot;')})"  class="star" id="1${item.idsurveyquestion}" src=${starImgpath} />

注意：你原有代码中img的id属性末尾多了多余的}，会导致后续id匹配失败，上面代码已经做了删除修正。

2. 修正星星图片筛选逻辑 #

你原有代码中筛选普通星星和高亮星星的条件完全一致，导致两个图片路径相同，修改如下：

// 用find直接获取单条匹配数据，比filter效率更高
// 获取普通星星路径
var starImg = contImg.find(function (item) {
  return item.ImageName === "star.png";
});
starImgpath = `./images/${starImg.idclient}/${starImg.idlocation}/${starImg.ImageName}`;

// 获取高亮星星路径
var highlightedStarImg = contImg.find(function (item) {
  return item.ImageName === "highlightedStar.png";
});
highlightedStarImgpath = `./images/${highlightedStarImg.idclient}/${highlightedStarImg.idlocation}/${highlightedStarImg.ImageName}`;

3. 修正rate函数逻辑 #

你原有代码中parseInt(i + item.idsurveyquestion)的写法会出现数字拼接错误，比如i=1、idsurveyquestion=22时会得到23而非预期的122，修改后代码如下：

function rate(item) {
  console.log("传入的item数据：", item);
  const clickId = event.target.id;
  // 提取点击的星级数字，比如id为122时，星级是1
  const clickStarLevel = parseInt(clickId.charAt(0));
  const qid = item.idsurveyquestion;

  for (let i = 1; i <= 5; i++) {
    const currentStarId = `${i}${qid}`;
    const currentStar = document.getElementById(currentStarId);
    if (i <= clickStarLevel) {
      currentStar.setAttribute("src", highlightedStarImgpath);
    } else {
      currentStar.setAttribute("src", starImgpath);
    }
  }
}

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