javascript - 如何将自定义集数据传递给 src 图像“onClick”？

Question

我有这个功能

 function changeImage() {
        console.log(event.target.getAttribute('data-image-path'));
        document.getElementById('image-id').src = event.target.getAttribute('data-image-path');
    }

单击时我想将 传递给data-image-path函数changeImage，在data-image-path里面li所以是 onclick：

<li data-image-path="./assets/img/my_imgs/features/sc2.png" onclick='changeImage(this.data-image-path)'> 
<div class="inside-li">
<img src="./assets/img/my_imgs/features/feat1.png" alt="image"> 
<p>Easy Scheduling &amp; Attendance Tracking</p>
</div>
<div class="plan-hr">
   <hr class="hr-1">
   <hr class="hr-2">
</div>
</li>

图片：

我有多个li元素，每个元素内部都包含不同的src图像，data-image-path但是如何传递数据？

这是img应该收到的元素src：

<div class="image-loader col-md-6 col-sm-12">
    <div class="banner-thumb-wrap">
       <div class="banner-thumb">
          <img class="header-inner-img" id="image-id">
       </div>
    </div>
</div>

这是我的 console.log 和代码中的结果：

标签： javascripthtmlonclick

Answer 1

用于在方法内event.target.getAttribute('data-image-path')获取 clickedli的data-image-path值changeImage()。

function changeImage() {
  console.log(event.target.getAttribute('data-image-path'));
  document.getElementById('image-id').src = event.target.getAttribute('data-image-path');
}

<img class="header-inner-img" id="image-id">

<li data-image-path="./assets/img/my_imgs/features/sc2.png" onclick='changeImage()'> </li>