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

Question

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

我想得到我试图使用引用的函数内的data-id和data-option值:但它没有用.goDoSomething(10, 21)thisthis.data['id']

我怎样才能做到这一点？

Answer 1

你可以$(identifier).data('id')使用jquery实现这一点,

    <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:你可以使用getAttribute("attributename")如果想使用javascript标签,

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

Answer 2

像这样:

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

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

Answer 3

我只是使用这个jQuery技巧：

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

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

Answer 4

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

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