如何将自定义集数据传递给 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()

访问数据

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">

Answer 2

使用 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 3

您可以将 HTML 更改为：

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

不过还有更好的版本：

Select li 个元素，之后是 querySelectorAll 和 addEventListener。

Answer 4

试试这个，将 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 5

我稍微更改了您的 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">

如何将自定义集数据传递给 src 图像 "onClick"？

How can I pass custom set data to a src image "onClick"?

html

javascript

onclick