点击列表项获取a标签href值赋值给aside内img的src实现图片切换咨询

问题修正与实现方案 #

原有代码问题梳理 #

• HTML属性拼写错误：ul标签的classes应为标准属性class
• JS逻辑错误：
  • 事件绑定逻辑重复，each遍历中重复给所有a标签绑定点击事件，会导致单次点击触发多次回调
  • jQuery each方法的第一个参数是索引值，不是事件对象
  • changePic回调内的循环完全冗余，且变量赋值方向颠倒，还有herf的拼写错误
  • 没有正确获取当前点击a标签的href属性赋值给目标img

优化后完整代码 #

1. HTML 修正（移除冗余行内点击事件，修正属性错误）

<aside>
    <img src="" alt="" id="image">
</aside>

<div>
    <ul class="test-images">
            <li><a href="images/1.jpg">1</a></li>
            <li><a href="images/2.jpg">2</a></li>
            <li><a href="images/3.jpg">3</a></li>
            <li><a href="images/4.jpg">4</a></li>
       </ul> 
</div>
<div>
    <ul class="real-images">
            <li><a href="images/1.jpg">1</a></li>
            <li><a href="images/2.jpg">2</a></li>
            <li><a href="images/3.jpg">3</a></li>
            <li><a href="images/4.jpg">4</a></li>
       </ul> 
</div>

2. JS 功能实现

// 图片切换回调函数
const changePic = evt => {
  // 阻止a标签默认跳转行为
  evt.preventDefault();
  // 获取当前点击a标签的href属性作为图片地址
  const imgSrc = $(evt.currentTarget).attr('href');
  // 赋值给aside内的img标签
  $('#image').attr('src', imgSrc);
}

$(document).ready(function(){
  // 直接给所有a标签绑定点击事件即可，无需遍历
  $('a').on('click', changePic);
});

如果需要兼容后续动态新增的a标签也能触发该功能，可以使用性能更好的事件委托写法，替换ready内的逻辑即可：

$(document).ready(function(){
  // 把事件绑定在父级document上，匹配所有a标签触发
  $(document).on('click', 'a', changePic);
});

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