JQuery绑定多元素点击事件获取value值遇undefined问题求助

问题根源 #

你遇到的undefined问题，核心原因是箭头函数的this绑定规则：箭头函数不会创建自己的this上下文，它会继承外层作用域的this，所以这里的$(this)根本不是你点击的那个.heroes-pic元素，自然拿不到对应的value属性。

解决方案 #

方案1：改用普通函数作为事件处理器

把箭头函数换成普通函数后，this会自动指向触发点击事件的DOM元素，这样就能正常获取属性了：

$(".heroes-pic").on("click", function() {
  const player = $(this).attr("value");
  console.log(player);
});

方案2：坚持用箭头函数？用事件对象获取元素

如果习惯用箭头函数，可以通过事件参数的currentTarget属性（始终指向绑定事件的元素）来获取目标节点，比target更稳妥（避免点击到内部的<img>导致出错）：

$(".heroes-pic").on("click", (event) => {
  const player = $(event.currentTarget).attr("value");
  console.log(player);
});

额外的最佳实践：使用标准自定义数据属性 #

value并不是<figure>标签的标准HTML属性，虽然浏览器能兼容，但更规范的做法是使用data-*自定义属性，比如把value改成data-value：

修改后的HTML：

<div id="heroes-selection" class="row dflex justify-content-left">
  <figure id="luna" class="heroes-pic border text-danger m-3" data-value="heroes.luna">
    <img class="animated-gif">
  </figure>
  <figure id="qop" class="heroes-pic border text-danger m-3" data-value="heroes.qop">
    <img class="animated-gif">
  </figure>
</div>

对应的JS可以用jQuery的.data()方法更优雅地获取值：

// 普通函数版
$(".heroes-pic").on("click", function() {
  const player = $(this).data("value");
  console.log(player);
});

// 箭头函数版
$(".heroes-pic").on("click", (event) => {
  const player = $(event.currentTarget).data("value");
  console.log(player);
});

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