如何将自定义集数据传递给 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元素，每个元素在其data-image-path都包含一个不同的src图像，但如何传递数据？

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

<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 和代码中的结果：

Answer 1

使用event.target.getAttribute('data-image-path')在changeImage()方法中获取点击的li的data-image-path值。

 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>

Answer 2

您可以将 HTML 更改为：

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

但是有一个更好的版本：

选择li的元素querySelectorAll和addEventListener后来他们。

Answer 3

试试这个，将this传递给changeImage函数并获取被点击元素的属性。

function changeImage(obj) {
        var imagePath2 = obj.getAttribute('data-image-path');
        document.getElementById('image-id').src = imagePath2;
    }

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

Answer 4

我稍微更改了您的 html 代码，并使用forEach方法显着更改了 js 代码，其中包含一个click侦听器。 这意味着不再需要调用onclick=changeImage (this.data-image-path)事件！ 我还离开了console以便您可以查看当前单击时正在加载哪个属性。

我希望这正是你所需要的。

 var li_attr = document.querySelectorAll('li'); var img = document.getElementById('image-id'); Array.from(li_attr).forEach(function(li_attrArray, i) { li_attrArray.addEventListener('click', function() { imagePath2 = li_attrArray.getAttribute('data-image-path'); img.src = imagePath2; console.log(img.src); }); });

 <li data-image-path="./assets/img/my_imgs/features/sc1.png">1</li> <li data-image-path="./assets/img/my_imgs/features/sc2.png">2</li> <li data-image-path="./assets/img/my_imgs/features/sc3.png">3</li> <li data-image-path="./assets/img/my_imgs/features/sc4.png">4</li> <img class="header-inner-img" id="image-id">

Answer 5

您可以传递事件，然后通过event.target.getAttribute()访问数据

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

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