停止按钮文本在所有按钮上更改

时间:2017-09-28 03:25:29

标签: jquery html button toggle slidetoggle

$('.entry-content #toggle').click(function() {

var elem = $('#toggle').text();

if (elem == 'Read More') {

$('.entry #toggle').text('Read Less');

} else {

$('.entry #toggle').text('Read More'); 

}

});  

此jQuery更改存档页面上每篇文章的所有按钮上的按钮文本。我只想让它改变点击的按钮。

<div id="toggle" class="btn">Read More</div>

<div class="text" />

更新1:如果有2个或更多段落,我只想添加按钮。我假设我可以使用。以后如何。

更新2:

$('#toggle').click(function() {

$(this).closest('.post').find('.text').slideToggle();

$(this).text(function( i, v ) {

   return v === 'Read More' ? 'Read Less' : 'Read More'


      });
});

3 个答案:

答案 0 :(得分:2)

简化代码。

$('#toggle').click(function() {
    $(this).text(function(i, v){
       return v === 'Read More' ? 'Read Less' : 'Read More'
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="toggle" class="btn">Read More</div>

<div class="text" />

答案 1 :(得分:1)

在活动中引用您自己的按钮。

$('.entry-content #toggle').click(function() {

var elem = $(this).text();

if (elem == 'Read More') {

$(this).text('Read Less');

} else {

$(this).text('Read More'); 

}

});  

参考。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

答案 2 :(得分:1)

$('#toggle').click(function() {

    var elem = $(this).text();

    if (elem == 'Read More') {
        $(this).text('Read Less');
    } else {
        $(this).text('Read More'); 
    }

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="toggle" class="btn">Read More</div>

<div class="text" />