Читать больше и читать меньше перепутано
Вопрос
Я пытаюсь добавить функцию «Читать больше/меньше» в несколько абзацев.
Я использую следующий 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');
Не проверял, но что-то вроде этого должно сработать.
Спасибо ребята.
Я решаю проблему двумя способами.
Первое решение.Я использовал hasClass, romoveClass и addClass, о которых мне посоветовал Крис Брандсма.Спасибо, Крис.
$(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;
});
});