jQuery comportement toggler pas comme prévu

Question

J'ai un toggler jQuery avec lequel je me bats. Je peux l'obtenir pour basculer la visibilité de plusieurs divs à la fois, mais dès que j'implémente la fonction next(), la seule chose qui bascule est la partie plus/moins du script, pas la visibilité de la div. Quelque chose se distingue dans ce code?

Cela fonctionne, mais désélectionne tous divs au lieu de seulement la ferme: un

jQuery(function(){ 
jQuery(".toggleText").click(function(){ 
    jQuery(".hiddenText").slideToggle("fast"); 
     jQuery(this).html(function(i,html) { 
      if (html.indexOf('More') != -1){ 
       html = html.replace('More','Less'); 
      } else { 
       html = html.replace('Less','More'); 
      } 
      return html; 
     }).find('img').attr('src',function(i,src){ 
     return (src.indexOf('plus.gif') != -1)? 'minus.gif' :'plus.gif'; 
    }); 
}); 
}); 

Ce ne plus permet de basculer +/moins - et non la div .hiddenText. (La seule différence dans ces deux est l'addition de next() dans la troisième ligne).

jQuery(function(){ 
jQuery(".toggleText").click(function(){ 
jQuery(this).next(".hiddenText").slideToggle("none"); 
     jQuery(this).html(function(i,html) { 
      if (html.indexOf('More') != -1){ 
       html = html.replace('More','Less'); 
      } else { 
       html = html.replace('Less','More'); 
      } 
      return html; 
     }).find('img').attr('src',function(i,src){ 
     return (src.indexOf('plus.gif') != -1)? 'minus.gif' :'plus.gif'; 
    }); 
}); 
}); 

Des idées? PS: J'utilise jQuery au lieu du $ à cause d'un conflit avec le CMS que ce code vit. dans.

Answer 1

De la façon dont vous écrivez

jQuery(this).next(".hiddenText") 

Je devine que vous voulez trouver le prochain .hiddentText après jQuery(this)? Ce n'est pas comme ça que fonctionne .next(). Je vais trouver le prochain frère, mais le filtre par le sélecteur en option.

Vous pourriez utiliser

jQuery(this).parent().children(".hiddenText") 

s'il n'y a qu'un seul .hiddentText dans le parent de jQuery(this).

Answer 2

jQuery(this).html(function(i,html) { 

Ne pas Futz avec le html()/innerHTML. Ça ne fait pas ce que tu penses. Lorsque vous faites cela, vous demandez au navigateur de sérialiser son modèle de document actuel en une chaîne HTML. Vous devez ensuite manipuler le code HTML et le réécrire, auquel cas le navigateur doit détruire tout le contenu de l'élément existant et le remplacer par de nouveaux nœuds DOM analysés à partir de la chaîne HTML. En plus d'être lent et peu fiable (parce que vous ne savez pas exactement quel format le navigateur choisira pour sérialiser le contenu, il ne sera pas sera le même que le code HTML original que vous avez nourri), ce détruit nécessairement toutes les informations dans le DOM qui ne peuvent pas être converties en une chaîne de balisage HTML. Cela inclut les valeurs de champ de formulaire, les références JavaScript et les gestionnaires d'événements. Ainsi, lorsque vous réécrivez le code HTML, vous avez perdu tous les événements click sur l'élément dans ce balisage, y compris ceux sur les flèches d'ouverture/fermeture.

Oubliez le piratage de chaîne HTML. Travailler directement sur les éléments DOM, en changeant le text() de chaque élément avec le contenu textuel More/Less directement.