获取 html 元素的点击事件的数据-* 属性

Getting data-* attribute for onclick event for an html element

本文关键字：数据 属性 事件 html 元素 获取      更新时间：2023-09-26
<a id="option1" data-id="10" data-option="21" href="#" onclick="goDoSomething(?,?);">
       Click to do something
</a>

我想在函数中获取data-id和data-option值，goDoSomething(10, 21)我尝试使用this参考：this.data['id']但它不起作用。

我该怎么做？

你可以

使用 jquery 来实现这个$(identifier).data('id')， 

    <script type="text/javascript">
        function goDoSomething(identifier){     
            alert("data-id:"+$(identifier).data('id')+", data-option:"+$(identifier).data('option'));               
        }
    </script>
    <a id="option1" 
       data-id="10" 
       data-option="21" 
       href="#" 
       onclick="goDoSomething(this);">
           Click to do something
    </a>
javascript

：如果你想使用javascript标签，你可以使用getAttribute("attributename")，

    <script type="text/javascript">
        function goDoSomething(d){
            alert(d.getAttribute("data-id"));
        }
    </script>
    <a id="option1" 
       data-id="10" 
       data-option="21" 
       href="#" 
       onclick="goDoSomething(this);">
           Click to do something
    </a>

或：

    <script type="text/javascript">
        function goDoSomething(data_id, data_option){       
            alert("data-id:"+data_id+", data-option:"+data_option);
        }
    </script>
    <a id="option1" 
       data-id="10" 
       data-option="21" 
       href="#" 
       onclick="goDoSomething(this.getAttribute('data-id'), this.getAttribute('data-option'));">
           Click to do something
    </a>

像这样：

$(this).data('id');
$(this).data('option');

工作示例：http://jsfiddle.net/zwHUc/

我只是使用这个jQuery技巧：

$("a:focus").attr('data-id');

它获取焦点a元素并从中获取 data-id 属性。

检查数据属性是否存在，然后执行操作... 

$('body').on('click', '.CLICK_BUTTON_CLASS', function (e) {
                        if(e.target.getAttribute('data-title')) {
                            var careerTitle = $(this).attr('data-title');
                            if (careerTitle.length > 0) $('.careerFormTitle').text(careerTitle);
                        }
                });

function get_attribute(){ alert( $(this).attr("data-id") ); }

阅读更多内容https://www.developerscripts.com/how-get-value-of-data-attribute-in-jquery

下面是一个例子 

 <a class="facultySelecter" data-faculty="ahs" href="#">Arts and Human Sciences</a></li>
    $('.facultySelecter').click(function() {        
    var unhide = $(this).data("faculty");
    });

这会将 var unhide 设置为 ahs，因此使用 .data（"foo"） 获取您要获取的 data-* 属性的 "foo" 值

可以直接

使用定位点 ID 或数据操作属性来触发事件。

网页代码

<a id="option1" data-action="option1" data-id="10" data-option="21" href="javascript:void(0);" title="Click Here">Click Here</a>

j查询代码：

$('a#option1').on('click', function(e) {
    e.preventDefault();
    console.log($(this).data('id') + '::' + $(this).data('option')) ;   
});

或

$('[data-action="option1"]').on('click', function(e) {
    e.preventDefault();
    console.log($(this).data('id') + '::' + $(this).data('option'));    
});

用户$()从您的链接中获取jQuery对象，data()获取您的值

<a id="option1" 
   data-id="10" 
   data-option="21" 
   href="#" 
   onclick="goDoSomething($(this).data('id'),$(this).data('option'));">
       Click to do something
</a>
相关文章：