En savoir plus et lire moins confondu

Question

J'essaie d'ajouter lire/lire moins de fonction à plusieurs paragraphes.

J'utilise le code HTML et jquery suivant. Cependant, si je clique sur le lien "Lire plus", cela ne fonctionne pas correctement. 'lisez plus' restez 'lisez plus', ou lisez plus et lisez moins les textes deviennent confus.

Quelqu'un pourrait-il me dire comment résoudre ce problème?

Merci d'avance.

<div id="section1"> 
<div class="toppara"> 
<img src="images/toh_texture1a.jpg" width="90" height="90" alt="pic" /> 
<p>Content 1. </p> 

</div> 

<div class="morepara"> 
<img src="images/plucchini_texture02.jpg" width="90" height="90" alt="pic" /> 
<p> 
Content 1-a. 
</p> 

</div> 

<p class="togglebutn"> 
<a href="#">LESE MER</a> 
</p> 
</div><!-- section 1 --> 

<!-- section 2 --> 
<div id="section2"> 
<div class="toppara"> 
<img src="images/dandelion.jpg" width="90" height="90" alt="pic" /> 
<p>Content 2. </p> 
</div> 


<div class="morepara"> 
<img src="images/toh_texture1a.jpg" width="90" height="90" /> 
<p> 
Content 2-a. 
</p> 


</div> 

<p class="togglebutn"> 
<a href="#">LESE MER</a> 

</p> 
</div><!-- section 2 --> 

<!-- section 3 --> 
<div id="section3"> 
<div class="toppara"> 
<img src="images/plucchini_texture02.jpg" width="90" height="90" /> 
<p>Content 3. </p> 
</div> 


<div class="morepara"> 
<img src="images/dandelion.jpg" width="90" height="90" /> 
<p> 
Content 3-a. 
</p> 


</div> 

<p class="togglebutn"> 
<a href="#">LESE MER</a> 

</p> 
</div><!-- section 3 --> 

<!-- section 4 --> 
<div id="section4"> 

<div class="toppara"> 
<img src="images/toh_texture1a.jpg" width="90" height="90" /> 
<p>Content 4. </p> 
</div> 


<div class="morepara"> 
<img src="images/plucchini_texture02.jpg" width="90" height="90" /> 
<p> 
Content 4-a. 
</p> 


</div> 

<p class="togglebutn"> 
<a href="#">LESE MER</a> 

</p> 
</div><!-- section 4 --> 

<script language="javascript" type="text/javascript"> 

$(function() { 
     // set a variable Toggled to false 
     var Toggled=false; 

// Toggle a paragraph 
    $('.togglebutn a').click(function(){ 
var $parentpara = $(this).parent().prev(); 
if(Toggled==false){$(this).html('<span class="readless">read less</span>');  Toggled=true;} 
     else{$(this).html('<span class="readmore">read more</span>');Toggled=false;} 
     $parentpara.toggle('slow'); 
     return false; 
    }); 

}); 


</script> 

Answer 1

Je ne l'ai pas eu le temps de tester complètement, mais cela devrait fonctionner pour vous. J'ai enlevé votre variable temporaire (vous ne devriez pas en avoir besoin) et j'utilise le hasClass pour voir si le span a readless ou readmore défini.

$(document).ready(function(){ 
// Toggle a paragraph 
    $('.togglebutn a').click(function(){ 
     var $parentpara = $(this).parent().prev(); 
     if ($(this > span).hasClass('readless')) { 
      $(this).html('<span class="readmore">read more</span>'); 
     } 
     else { 
      $(this).html('<span class="readless">read less</span>');  
     } 

     return false; 
    }); 
}); 

Answer 2

Le problème dans votre code est que seul un Toggled var est utilisé pour les trois paragraphes. Vous pouvez éviter d'utiliser la variable du tout. Utiliser

.toggleClass('readless').toggleClass('readmore').text($(this).text()=='read less' ? 'read more' : 'read less'); 

N'avez pas testé, mais quelque chose comme ça devrait faire l'affaire.

Answer 3

Merci les gars.

Je résous le problème de deux façons.

Première solution. J'ai utilisé hasClass, romoveClass et addClass dont j'ai eu un pourboire de Chris Brandsma. Merci Chris.

$(function() { 
    // Toggle a paragraph 
    $('.togglebutn a').click(function(){ 
     var $parentpara = $(this).parent().prev(); 
     if ($(this).hasClass('readless')) { 
      $(this).html('LESE MER').removeClass().addClass('readmore'); 
    } 
    else { 
      $(this).html('LESE MINDRE').removeClass().addClass('readless');  
    } 
     $parentpara.slideToggle('fast'); 
     return false; 
    }); 

}); 

Deuxième solution. J'ai utilisé ici est l'attribut. Je pense que quelqu'un peut dire que ce n'est pas une bonne façon. Mais ça fonctionne. Fondamentalement, il est le même que la solution 1.

$(function() { 
    // Toggle a paragraph 
    $('.togglebutn a').click(function(){ 
     var $parentpara = $(this).parent().prev(); 
     var $titleattr = $(this).attr('title'); 
     if($titleattr=='readmore') {$(this).attr('title','readless').html('<span class="readless">LESE MINDRE</span>');} 
     else{$(this).attr('title','readmore').html('<span class="readmore">LESE MER</span>');} 
     $parentpara.toggle('slow'); 
     return false; 
    }); 

});