Le texte de bascule jquery ne change qu'une seule fois

Question

J'ai le code suivant qui devrait changer la valeur d'un h2 de "Afficher plus" à "Afficher moins", puis revenir à nouveau lorsque le parent est cliqué. Le if() teste ok et change le texte en Show Less mais ne le changera plus jamais et affichera toujours l'alerte "Show More" afin qu'il ne détecte pas la condition else().

J'ai cherché haut et bas pour trouver pourquoi mais je n'ai pas encore trouvé de solution.

Je sais que c'est une question noob alors excusez-moi mais j'ai essayé de trouver la solution avant de poster ici.

Merci.

$('#panels > .feature').click(function() { 
    if($(this).children('h2').val('Show More')) { 
     $(this).children('h2').text('Show Less'); 
     alert('Show More was found');  
    } 
    else { 
     $(this).children('h2').text('Show More'); 
     alert('Show Less was found'); 
    } 
     $(this).next(".info_box").animate(
    {'height':'toggle'}, 'slow', 'linear' 
    );  
}); 

Le code HTML en question est:

<div id="panels"> 
<div id="Email" class="feature"> 
    <h1>LiveContent</h1><h2>Show More</h2> 
</div> 
<div class="info_box">Information will go in this div which should slide in and out.</div> 
<div id="Email" class="feature"> 
    <h1>Publishing Solutions</h1><h2>Show More</h2> 
</div> 
<div class="info_box">Information will go in this div which should slide in and out.</div> 
<div id="Email" class="feature"> 
    <h1>Title 1</h1><h2>Show More</h2> 
</div> 
<div class="info_box">Information will go in this div which should slide in and out.</div> 
</div> 

Answer 1

Vous utilisez .val() pour vérifier le texte, utilisez .text() à la place (et comparer le résultat, ne pas mis il), comme ceci:

if($(this).children('h2').text() == 'Show More')) { //here 
    $(this).children('h2').text('Show Less'); 
    alert('Show More was found');  
} 
else { 
    $(this).children('h2').text('Show More'); 
    alert('Show Less was found'); 
} 

De plus, vous pouvez mince vers le bas ensemble en utilisant une fonction pour .text() et .slideToggle(), comme ceci:

$('#panels > .feature').click(function() { 
    $(this).children('h2').text(function(i, t) { 
     return t == 'Show More' ? 'Show Less' : 'Show More'; 
    }); 
    $(this).next(".info_box").slideToggle("slow"); 
}); 

You can test it out here.

Answer 2

if($(this).children('h2').val('Show More')) { 

Si cela se .TEXT au lieu de .val?

Answer 3

La fonction .val('Show More) essaie de définir l'attribut HTML value à 'Show More'. Si vous l'appelez sans les paramètres, il agira comme un getter, pas un setter - ce que vous voulez. Mais pour le texte, pas la valeur. Par conséquent, au lieu de .val('Show More'), vous voulez quelque chose comme .text() == 'Show More'.

Answer 4

Vous définissez le texte au lieu de le comparer. Utilisez la méthode text sans paramètre pour obtenir la valeur, puis le comparer:

if($(this).children('h2').text() == 'Show More') 

Le code n'a même pas correctement la première fois, comme il a toujours fait la même chose. La raison pour laquelle cela a semblé fonctionner la première fois est qu'il est arrivé de toujours faire ce qu'il était censé faire la première fois.