获取html元素的onclick事件的data- *属性

时间:2013-11-17 11:35:27

标签: javascript jquery html

<a id="option1" data-id="10" data-option="21" href="#" onclick="goDoSomething(?,?);">
       Click to do something
</a>

我想在函数data-id中获取data-optiongoDoSomething(10, 21)值我尝试使用this引用:this.data['id']但它不起作用

我该怎么做?

7 个答案:

答案 0 :(得分:65)

您可以使用 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>

答案 1 :(得分:27)

像这样:

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

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

答案 2 :(得分:4)

我只是使用这个jQuery技巧:

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

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

答案 3 :(得分:2)

这是一个例子

 <a class="facultySelecter" data-faculty="ahs" href="#">Arts and Human Sciences</a></li>

    $('.facultySelecter').click(function() {        
    var unhide = $(this).data("faculty");
    });

这会将var取消隐藏为啊,所以使用.data(“foo”)来获取你想要得到的data- *属性的“foo”值

答案 4 :(得分:0)

用户$()从您的链接获取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>

答案 5 :(得分:0)

检查data属性是否存在,然后进行处理...

$('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);
                        }
                });

答案 6 :(得分:0)

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

了解更多信息,请访问 https://www.developerscripts.com/how-get-value-of-data-attribute-in-jquery