web-dev-qa-db-fra.com

Obtention de l'attribut data- * pour l'événement onclick d'un élément html

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

Je veux obtenir les valeurs data-id Et data-option Dans la fonction goDoSomething(10, 21) J'ai essayé d'utiliser this référence: this.data['id'] Mais n'a pas fonctionné.

Comment puis-je faire ceci?

javascriptjqueryhtml
49
zkanoca

Vous pouvez y parvenir $(identifier).data('id') avec 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: Vous pouvez utiliser getAttribute("attributename") si vous souhaitez utiliser une balise 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>

Ou:

    <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>
72
Krish R

Comme ça:

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

Exemple de travail: http://jsfiddle.net/zwHUc/

27
CD..

J'utilise simplement ce truc jQuery:

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

Il obtient l'élément a ciblé et obtient le data-id attribut de celui-ci.

4
Mobetoh

voici un exemple

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

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

cela définirait var unhide comme ah, utilisez donc .data ("foo") pour obtenir la valeur "foo" de l'attribut data- * que vous cherchez à obtenir

2
James Kirkby

Utilisateur $() pour obtenir l'objet jQuery de votre lien et data() pour obtenir vos valeurs

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