문제
다중 단락에 더 많은 읽기 / 읽기 기능을 추가하려고합니다.
다음 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>
해결책
나는 이것을 완전히 테스트 할 시간이 없었지만 이것은 당신에게 효과적입니다. 임시 변수를 제거했으며 (필요하지 않아야합니다) 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;
});
});
다른 팁
코드의 문제는 단 하나입니다 Toggled
VAR은 세 단락 모두에 사용됩니다. 변수를 전혀 사용하지 않을 수 있습니다. 사용
.toggleClass('readless').toggleClass('readmore').text($(this).text()=='read less' ? 'read more' : 'read less');
테스트하지는 않았지만 이와 같은 일이 트릭을 수행해야합니다.
감사합니다.
나는 두 가지 방법으로 문제를 해결합니다.
주먹 솔루션. Chris Brandsma에서 팁을 얻은 Hasclass, RomoveClass 및 AddClass를 사용했습니다. 감사합니다 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;
});
});
제휴하지 않습니다 StackOverflow