Passage d'un paramètre à partir d'un élément html avec jQuery

Question

Je travaille avec jQuery pour la première fois et j'ai besoin d'aide. J'ai du html qui ressemble à ce qui suit :

<div id='comment-8' class='comment'>
    <p>Blah blah</p>
    <div class='tools'></div>
</div>

<div id='comment-9' class='comment'>
    <p>Blah blah something else</p>
    <div class='tools'></div>
</div>

J'essaie d'utiliser jQuery pour ajouter des espaces aux divs .tools qui appellent diverses fonctions lorsqu'on clique dessus. Les fonctions doivent recevoir l'identifiant (soit l'intégralité de 'comment-8', soit seulement la partie '8') du commentaire parent afin que je puisse afficher un formulaire ou d'autres informations sur le commentaire.

Ce que j'ai jusqu'à présent est :

<script type='text/javascript'>

    $(function() {
        var actionSpan = $('<span>[Do Something]</span>');
        actionSpan.bind('click', doSomething);

        $('.tools').append(actionSpan);
     });

     function doSomething(commentId) { alert(commentId); }

</script>

Je suis bloqué sur la façon de remplir le paramètre commentId pour doSomething. Peut-être qu'au lieu de l'id, je devrais passer une référence au span qui a été cliqué. Ce serait probablement aussi bien, mais je ne suis pas sûr de la façon d'accomplir cela.

Merci, Brian

Answer 1

La fonction bind() prend, prend l'élément comme paramètre (dans votre cas le span), donc pour obtenir l'id que vous voulez vous devez faire une traversée du DOM comme :

function doSomething(eventObject) { 
    var elComment = eventObject.parentNode.parentNode; //or something like that, 
                                                       //didn't test it
    var commentId= elComment.getAttribute('commentId')
    alert(commentId); 
}