JQuery sélectionne les enfants en fonction de plusieurs classes de l'élément parent

Question

Je viens de démarrer avec JQuery et j'ai besoin de changer la classe css de deux éléments et de supprimer leurs gestionnaires d'événements onclick.

Lorsque l'un des trois éléments de la div avec class upDown est cliqué, une fenêtre contextuelle apparaît. Quand on clique sur un bouton de cette fenêtre, vote_click() est appelé.

Je dois désactiver les éléments avec des classes "up" et "down", mais pas d'autres.

<div class="upDown"> 
    <div class="up" id="ctl04_btnUp" onclick="lastClick=this;" ></div> 
    <div class="com" id="ctl04_btnCom" onclick="lastClick=this;"></div> 
    <div class="down" id="ctl04_btnDown" onclick="lastClick=this;"></div> 
</div> 

Voici ma tentative

var lastClick; //will be set to either the "up" or "down" 

    function vote_click() { 
     if (lastClick && lastClick.className != "com") { 
      $("#"+lastClick.parentElement.id + " > .up .down").each(
       function(index, e) { 
        alert('disabled ' + this.id); 
        this.onclick = null; 
        this.className += '-ya'; 
       } 
      ); 

      lastClick = null; 
     } 
    } 

J'ai clairement aucune idée de ce que je fais donc des observations générales au sujet de mon approche serait appréciée.

Answer 1

J'espère que le code suivant fait ce que vous avez l'intention:

(function($) { 
    var lastClick = null; 

    $('div.upDown .up, div.upDown.com, div.upDown.down').bind('click', function(e) { 
     lastClick = this; 
    }); 

    function vote_click() { 
     if (lastClick && (lastClick.hasClass('up') || lastClick.hasClass('down')) { 
      $('div.upDown .up, div.upDown.down').each(function() { 
       var $this = $(this); 
       $this.unbind('click'); 
       var c = $this.attr('class'); 
       $this.removeClass(c).addClass(c + '-ya'); 
      }); 
     } 
    } 

})(jQuery); 

Note:

• Le code se débarrasse des onclick attributs dans les balises HTML afin que votre JS est purement discret.
• Puisque tout est enveloppé dans une fonction anonyme qui est exécutée immédiatement, il n'introduit aucune variable globale, ce qui est bon pour l'interopérabilité. Auparavant, la variable lastClick était globale.
• Dans votre code, $("#"+lastClick.parentElement.id + " > .up .down") sélectionnera tous les éléments avec la classe down qui sont les descendants d'un élément avec la classe up qui est un enfant de l'élément avec l'ID lastClick.parentElement.id. Ce n'est pas ce que tu veux. Vous pouvez écrire ce que vous voulez plus facilement comme $(lastClick).parent().find('.up, .down').

EDIT Un mot sur la raison pour laquelle onclick est souvent indésirable: Personnellement, je n'aime pas parce que JavaScript dans GLOBALS tout le code JS en cours d'exécution dans la page (peut-être de plusieurs développeurs qui ne communiquent pas) Quote-part un espace de noms global. Les gestionnaires d'événements déclarés au moyen de onclick etc. se réfèrent souvent à des globals (comme dans votre cas), c'est donc une raison pour moi de les éviter.

La seconde est que le code spécifié dans un attribut onclick s'exécute dans une étendue spéciale (ou chaîne de portée, pour être précis). Il ne pas course dans l'espace de noms global directement, mais dans une chaîne étendue composée de

• L'élément qui a déclenché le gestionnaire d'événements (ici, l'élément div)
• L'objet document
• Peut-être quoi que ce soit dans l'objet global (window)

entre (ce n'est pas spécifié)

Enfin, bien sûr, cela peut conduire à des malentendus involontaires, comme vous appelez open() et window.open(), mais ce que vous obtenez est document.open().En bref, je préfère savoir exactement ce que mes gestionnaires d'événements peuvent et ne peuvent pas voir, et je pense que dans les grands projets, la séparation stricte des parties du code et l'évitement des variables globales sont payantes. Pour les petits morceaux de code et tant que vous n'écrivez pas de romans dans les attributs onclick, l'utilisation de onclick etc. est correcte.

P.S .: Oui, il est honteusement évident que j'utilise un exemple du "JavaScript - The Definitive Guide" de Flanagan.