더 읽고 더 적은 것을 섞어 라

Question

나는 더 많은 것을 추가하려고 노력하고있다/다단계에 적은 기능을 읽었다.

다음 HTML과 jquery를 사용합니다. 그러나 다른 'read more'링크를 클릭하면 제대로 작동하지 않습니다. '더 읽으십시오'더 읽기 '를 계속하거나, 더 많이 읽고 더 적은 텍스트를 읽으면 혼란 스럽습니다.

아무도이 문제를 해결할 수있는 방법을 알려주시겠습니까?

미리 감사드립니다.

<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를 사용하여 스팬에 읽기 또는 읽기가 정의되어 있는지 확인합니다.

Answer 2

코드의 문제는 하나의 Toggled var에 세 단락에 사용된다는 점이다. 변수를 전혀 사용하지 않아도됩니다. 사용

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

테스트를 거치지는 않았지만 이와 같은 방법으로 트릭을 수행해야합니다.

Answer 3

감사합니다.

두 가지 방법으로 문제를 해결합니다.

주먹 솔루션. hasClass, romoveClass 및 addClass를 사용하여 Chris Brandsma에서 팁을 얻었습니다. 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; 
    }); 

}); 

두 번째 솔루션. 여기에 사용 된 속성입니다. 나는 누군가가 이것이 올바른 방법이 아니라고 말할지도 모른다고 생각한다. 그러나 그것은 효과적이다. 기본적으로 솔루션 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; 
    }); 

});