Lesen Sie mehr und lesen weniger gemischt

Question

ich mehr / weniger lesen Funktion Multi Absatz lesen hinzufügen versuchen.

Ich verwende den folgenden HTML und jquery. wenn ich jedoch unterschiedlichen Link klicken ‚mehr lesen‘, funktioniert es nicht richtig. ‚Mehr lesen‘ Aufenthalt ‚mehr lesen‘ oder mehr lesen und lesen weniger Texte verwirrt werden.

Kann mir jemand sagen, wie dieses Problem beheben?

Vielen Dank im Voraus.

<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

Ich habe keine Zeit, um vollständig dies zu testen, aber dies sollte für Sie arbeiten. Ich entfernte Ihre temporäre Variable (sollten Sie es nicht brauchen), und ich bin mit dem hasClass zu sehen, ob die Spanne readless hat oder readmore definiert.

$(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

Das Problem in Ihrem Code ist, dass nur ein Toggled var für alle drei Ziffern verwendet wird. Sie können alle mit der Variable vermeiden. Mit

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

Habe es nicht getestet, aber so etwas wie dies sollte es tun.

Answer 3

Danke Jungs.

Ich löse das Problem in zweierlei Hinsicht.

Faust Lösung. Ich benutzte hasClass, romoveClass und addClass die ich einen Tipp von Chris Brandsma bekam. Dank 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; 
    });

});

Zweite Lösung. Früher habe ich hier Attribut. Ich denke, dass jemand sagen kann dies kein richtiger Weg ist. Aber es funktioniert. Im Grunde ist es das gleiche wie die Lösung 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; 
    });

});