阅读更多，阅读更少混合

Question

我想添加阅读更多/读少功能多段落。

我使用下面的HTML和jQuery。但是，如果我点击不同的“阅读更多”链接，它将无法正常工作。 '阅读更多'停留'阅读更多'，或阅读更多，阅读更少的文字变得困惑。

谁能告诉我如何解决这个问题？

在此先感谢。

<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

我没有时间去完全测试这个，但这应该适合你。我删除了你的临时变量（你不需要它），我使用hasClass来查看跨度是否已经读取或读取更多。

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

代码中的问题是，在所有三个段落中只使用一个Toggled var。你可以避免使用变量。使用

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

还没有测试过，但像这样的事情应该做的伎俩。

Answer 3

谢谢你们。

我以两种方式解决问题。

拳头解决方案。我使用了hasClass，romoveClass和addClass，我从Chris Brandsma那里得到了一个小贴士。谢谢克里斯。

$(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; 
    }); 

}); 

第二种解决方案。我在这里使用的是属性。我认为有人可能会说这不是一个正确的方法。但它的工作。基本上与解决方案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; 
    }); 

});