Читать больше и меньше читать

Я пытаюсь добавить функцию «Читать больше/меньше» в несколько абзацев.

Я использую следующий 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>

toggle jquery
person shin    schedule 13.06.2009    source источник

Ответы (3)


arrow_upward
0
arrow_downward

У меня не было времени, чтобы полностью проверить это, но это должно сработать для вас. Я удалил вашу временную переменную (она вам не нужна), и я использую 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; 
    });
});
person Chris Brandsma    schedule 13.06.2009

arrow_upward
1
arrow_downward

Проблема в вашем коде в том, что для всех трех абзацев используется только одна переменная Toggled. Вы можете вообще не использовать эту переменную. Использовать

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

Не проверял, но что-то вроде этого должно помочь.

person stanch    schedule 13.06.2009

arrow_upward
0
arrow_downward

Спасибо ребята.

Я решаю проблему двумя способами.

Кулачное решение. Я использовал 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; 
    });

});
person shin    schedule 13.06.2009