如何將自定義集數據傳遞給 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">