Jquery. Pourquoi ça marche?

Question

Pouvez-vous expliquer pourquoi ce http://www.sebastiansulinski.co.uk/demos/jquery_show_hide/ fonctionne? Toutes les classes sont identiques, mais lorsque vous cliquez sur Ouvrir, un seul texte est ouvert. Pourquoi?

Answer 1

Il ouvre uniquement un conteneur de texte car l'événement click est lié à chaque élément correspondant div.trigger. Lorsque vous cliquez sur l'un des éléments correspondants, vous cliquez uniquement sur un élément correspondant, et non sur les 3 dans l'exemple. Utilisation de $(this) à l'intérieur de la fonction de rappel de clic ne fait référence qu'à l'élément cliqué.

Le code peut également être nettoyé un peu en enchaînant simplement les appels ensemble:

$('div.trigger').click(function() { 
    if ($(this).hasClass('open')) { 
     $(this).removeClass('open').addClass('close').next().slideDown(100); 
    } else { 
     $(this).removeClass('close').addClass('open').next().slideUp(100); 
    } 
    return false; 
}); 

Answer 2

Lorsque vous cliquez sur un déclencheur div avec la classe, il ouvre l'élément à côté du déclencheur en utilisant next(). Les noms de classe n'ont pas d'importance car il fonctionne sur , qui est l'élément cliqué. Après avoir ouvert le div suivant, il s'attribue une classe 'ouverte' pour pouvoir agir différemment lorsque l'utilisateur clique dessus la fois suivante.

Le code de cette page va comme ceci:

$('div.trigger').click(function() { 
    if ($(this).hasClass('open')) { 
     $(this).removeClass('open'); 
     $(this).addClass('close'); 
     $(this).next().slideDown(100); 
     return false; 
    } else { 
     $(this).removeClass('close'); 
     $(this).addClass('open'); 
     $(this).next().slideUp(100); 
     return false; 
    }    
}); 

Ce qui, traduit en anglais, va comme ceci:

/* 
When .trigger is clicked: 
    If it has a class named 'open': 
     Remove that class, 
     and add a class named 'close'. 
     Slide down the element next to this element in 100 milliseconds. 
     Prevent other actions from taking place. 
    If it hasn't got a class named 'open': 
     Remove class 'close', 
     and add class 'open'. 
     Slide up the element next to this element in 100 milliseconds. 
     Prevent other actions from taking place. 

Answer 3

$('div.trigger').click(function()...this... signifie que lorsque vous cliquez sur un élément de classe trigger, la La fonction est appliquée à seulement this, étant l'élément sur lequel vous avez cliqué. Lorsque vous cliquez dessus, il obtient une nouvelle classe, open, qui lui donne de nouvelles propriétés.

Answer 4

Ceci est parce que vous travaillez avec $ (ce) qui se traduit par le bouton que vous cliquez.

Answer 5

La fonction $(document).ready() dans le code source attache une nouvelle fonction click à chaque élément$('div.trigger'):

$('div.trigger').click(function() { 
    // ... 
}); 

En fonction du individuel (courant) div est désignée par $(this).

if ($(this).hasClass('open')) { 
    // ... 
}   

En un mot, chaque div a la même fonction assignée et le code de fonction est écrit dans la perspective de la div actuelle (cliqué).

Answer 6

Certains commentaires en ligne pourrait expliquer clairement:

#If we have divs with the class 'trigger' 
if($('div.trigger').length > 0) { 
    # Attach logic to the click event of each 
    $('div.trigger').click(function() { 
    # If this has the class 'open' already 
    if ($(this).hasClass('open')) { 
     # Remove the class 'open' 
     $(this).removeClass('open'); 
     # Add the class 'close' 
     $(this).addClass('close'); 
     # And slide down the next div 
     $(this).next().slideDown(100); 
     # Return False 
     return false; 
    } else { 
     # If this didn't have 'open', remove 'close' 
     $(this).removeClass('close'); 
     # Add the class 'open' 
     $(this).addClass('open'); 
     # And slide up the next div 
     $(this).next().slideUp(100); 
     # Return false 
     return false; 
    }   
    }); 
}