Javascript：在點擊事件上獲取數據屬性

Question

我試圖像這樣單擊事件來提醒data-attr值

<div class="col-md-2 col-xs-2" onclick="changeImage(event)">
    <img src="img/img1.jpg" data-attr="img1.jpg">
    <img src="img/img2.jpg"  data-attr="img2.jpg">
</div> 

<script type="text/javascript">
        function changeImage(event){
                    var target= event.target;                    
                    alert(target.data-attr);
        }
</script>

在這里，如果我的目標圖像的src將發出警報，但data-attr無法執行，請問如何做

Answer 1

您應該使用dataset屬性來檢索data-*屬性：

function changeImage(event) {
    var target = event.target;
    alert(target.dataset.attr);
}

工作實例

另外，看到您用jQuery標記了這個問題后，這是一個沒有丑陋的onclick屬性的jQuery實現：

<div class="col-md-2 col-xs-2">
    <img src="img/img1.jpg" data-attr="img1.jpg">
    <img src="img/img2.jpg" data-attr="img2.jpg">
</div>

$(function() {
    $('div.col-md-2').on('click', 'img', function() {
        alert($(this).data('attr'))
    });
});

小提琴的例子

Answer 2

使用getAttribute()

function changeImage(event){
      var target= event.target;                    
      console.log( target.getAttribute('data-attr') );
}

Answer 3

使用ELEMENT.getAttribute("ATTRIBUTE")獲取元素上的任何屬性：

並且在data- Attribute的情況下，您還可以使用ELEMENT.dataset.ATTRIBUTE ：

 <div class="col-md-2 col-xs-2" onclick="changeImage(event)"> <img src="img/img1.jpg" data-attr="img1.jpg"> <img src="img/img2.jpg" data-attr="img2.jpg"> </div> <script type="text/javascript"> function changeImage(event) { var target = event.target; alert(target.getAttribute("data-attr")); alert(target.dataset.attr); } </script> 

Answer 4

嘗試使用getAttribute()函數。 以下代碼描述相同

 function changeImage(event) { var target = event.target; console.log(target.getAttribute("data-attr")); } 

 <div class="col-md-2 col-xs-2" onclick="changeImage(event)"> <img src="img/img1.jpg" data-attr="img1.jpg"> <img src="img/img2.jpg" data-attr="img2.jpg"> </div>