قراءة المزيد وقراءة أقل مختلطة

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 التي حصلت على نصيحة من كريس براندسما. شكرا كريس.

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

});