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

Les rappels d'événements sont appelés avec un objet événement comme premier argument, vous ne pouvez pas passer quelque chose d'autre de cette façon. Cet objet événement a un target qui fait référence à l'élément pour lequel il a été appelé, et la propriété this est une référence à l'élément auquel le gestionnaire d'événement était attaché. Vous pourriez donc faire ce qui suit :

function doSomething(event)
{
    var id = $(event.target).parents(".tools").attr("id");
    id = substring(id.indexOf("-")+1);
    alert(id);
}

...ou :

function doSomething(event)
{
    var id = $(this).parents(".tools").attr("id");
    id = substring(id.indexOf("-")+1);
    alert(id);
}

Answer 2

Pour passer du span aux divs qui l'entourent, vous pouvez utiliser <tt>parent()</tt> (si vous connaissez la relation exacte), comme ceci : <tt>$(this).parent().attr('id')</tt>; ou si la structure peut être plus profondément imbriquée, vous pouvez utiliser parents() pour rechercher dans l'arbre DOM, comme ceci : <tt>$(this).parents('div:eq(0)').attr('id')</tt> .

Pour garder ma réponse simple, j'ai commencé à faire correspondre la classe <tt>"comment"</tt> mais bien sûr, vous pouvez le faire si cela vous aide à réduire le nombre de divisions que vous recherchez.

Answer 3

Vous n'avez pas beaucoup de contrôle sur les arguments transmis à un gestionnaire d'événement lié.

Essayez peut-être quelque chose comme ceci pour votre définition de doSomething() :

function doSomething() { 
  var commentId = $(this).parent().attr('id');
  alert(commentId); 
}

Answer 4

Il serait peut-être plus facile de passer en revue les commentaires et d'ajouter l'outil à chacun d'eux. De cette façon, vous pouvez leur donner à chacun leur propre fonction. J'ai fait en sorte que la fonction renvoie une fonction de sorte que lorsqu'elle est appelée plus tard, elle dispose de l'ID de commentaire correct.

Les autres solutions (qui remontent pour trouver l'ID du parent) seront probablement plus efficaces en termes de mémoire.

<script type='text/javascript'>

$(function() {
  $('.comment').each(function(comment) {
    $('.tools', comment).append(
      $('<span>[Do Something]</span>')
          .click(commentTool(comment.id));
    );
  });
});

function commentTool(commentId) {
  return function() {
    alert('Do cool stuff to ' + commentId);
  }
}

</script>

Answer 5

Un peu de fantaisie pour vous donner une idée de certaines des choses que vous pouvez faire :

var tool = $('<span>[Tool]</span>');

var action = function (id) {
    return function () {
        alert('id');
    }
}

$('div.comment').each(function () {
    var id = $(this).attr('id');

    var child = tool.clone();
    child.click(action(id));

    $('.tools', this).append(child);
});