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

Question

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

I want to get the data-id and data-option values inside the function goDoSomething(10, 21) I have tried to use this reference: this.data['id'] 但它没有用。

我怎样才能做到这一点？

原文由 zkanoca 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

原文由 Krish R 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

像这样：

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

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

原文由 CD.. 发布，翻译遵循 CC BY-SA 3.0 许可协议