Jquery 多读，少读，混在一起

我试图在多段落中添加“多读/少读”功能

我使用以下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>

内容1


内容1-a。



内容2


内容2-a。



内容3


内容3-a。



内容4


内容4-a。



$（函数（）{
//将变量设置为false
var-Toggled=false；
//切换段落
$（'.togglebutn a'）。单击（函数（）{
var$parentpara=$（this.parent（）.prev（）；
if（Toggled==false）{$（this.html（'readless'）；Toggled=true；}
else{$（this.html（'readmore'）；Toggled=false；}
$parentpara.toggle（'slow'）；
返回false；
});
});

代码中的问题是，所有三个段落都只使用了一个切换的

变量。您完全可以避免使用该变量。使用

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

我还没有测试过它，但是类似这样的东西应该可以解决这个问题。
代码中的问题是，所有三个段落都只使用了一个切换的
变量。您完全可以避免使用该变量。使用

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

我还没有测试过它，但是类似的东西应该可以解决这个问题。
我没有时间完全测试它，但是这应该对你有用。我删除了您的临时变量（您不应该需要它），我正在使用hasClass查看span是否定义了readless或readmore

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

$（文档）.ready（函数（）{
//切换段落
$（'.togglebutn a'）。单击（函数（）{
var$parentpara=$（this.parent（）.prev（）；
if（$（this>span）.hasClass（'readless'））{
$（this.html（'readmore'）；
}
否则{
$（this.html（'readless'）；
}
返回false；
});
});
我没有时间完全测试这一点，但这应该对您有用。我删除了您的临时变量（您不应该需要它），我正在使用hasClass查看span是否定义了readless或readmore

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

$（文档）.ready（函数（）{
//切换段落
$（'.togglebutn a'）。单击（函数（）{
var$parentpara=$（this.parent（）.prev（）；
if（$（this>span）.hasClass（'readless'））{
$（this.html（'readmore'）；
}
否则{
$（this.html（'readless'）；
}
返回false；
});
});
谢谢大家

我用两种方法解决这个问题

第一个解决方案。我使用了hasClass、romoveClass和addClass，这是我从Chris Brandsma那里得到的提示。谢谢你，克里斯

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

});

$（函数（）{
//切换段落
$（'.togglebutn a'）。单击（函数（）{
var$parentpara=$（this.parent（）.prev（）；
var$titleattr=$（this.attr（'title'）；
if（$titleattr=='readmore'）{$（this.attr（'title'，'readless'）.html（'LESE MINDRE'）；}
else{$（this.attr（'title'，'readmore'）.html（'LESE-MER'）；}
$parentpara.toggle（'slow'）；
返回false；
});
});
谢谢大家

我用两种方法解决这个问题

第一个解决方案。我使用了hasClass、romoveClass和addClass，这是我从Chris Brandsma那里得到的提示。谢谢你，克里斯

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

});

$（函数（）{
//切换段落
$（'.togglebutn a'）。单击（函数（）{
var$parentpara=$（this.parent（）.prev（）；
var$titleattr=$（this.attr（'title'）；
if（$titleattr=='readmore'）{$（this.attr（'title'，'readless'）.html（'LESE MINDRE'）；}
else{$（this.attr（'title'，'readmore'）.html（'LESE-MER'）；}
$parentpara.toggle（'slow'）；
返回false；
});
});