jQuery：切换“显示”时更改按钮内的文本

Question

我创建了一个切换按钮来显示和隐藏div，但是我希望在#content div上切换“显示”时，按钮内的文本从“显示内容”变为“隐藏内容”。我仍在学习jQuery，这让我有点烦恼，不胜感激！

编辑 ：我发现，因为我在一个页面上有很多帖子，并且在所有帖子中都重复了该代码，当我单击按钮以在一个帖子上显示内容时，它会在所有帖子上显示内容。 如何补救？

HTML

<div class="post-content">
  <button id='content-button'>Show Content</button>
  <div id='content'>Hello World</div>
</div>

CSS #content {display：none; }

JQUERY

jQuery(document).ready(function(){
    jQuery('#content-button').live('click', function(event) {        
         jQuery('#content').toggle('show');
    });
});

http://jsfiddle.net/syctdh46/

Answer 1

你可以这样

jQuery(document).ready(function() {
    jQuery('#content-button').live('click', function(event) {
        $('#content').is(":visible") ? $(this).text("Show Content") : $(this).text("Hide Content");
        jQuery('#content').toggle();
    });
});

使用is(":visible")检查div的可见性，然后更改文本

小提琴

编辑

jQuery('#content-button').live('click', function(event) {
    $(this).next().is(":visible") ? $(this).text("Show Content") : $(this).text("Hide Content");
    $(this).next().toggle();
});

Answer 2

您可以使用变量来保留单击按钮时的时间并更改文本：

jQuery(document).ready(function () {
    var i = 0;
    jQuery('#content-button').live('click', function (event) {
        jQuery('#content').toggle('show');
        if (i == 0) {
            $(this).text("Hide Content");
            i = 1;
        } else {
            $(this).text("Show Content");
            i = 0;
        }
    });
});

小提琴

Answer 3

我会简单地编写代码（对幻灯片效果感到抱歉，但也许您对此也有兴趣）：

JQuery('#content-button').live('click', function(event) {    
  JQuery("#content").slideToggle("slow",function(){
    if (JQuery("#content").css("display")=="none"){ 
      JQuery(this).text("Show Content");
    } else {
      JQuery(this).text("Hide Content");
    }
  });
});

Answer 4

jQuery(document).ready(function(){
    jQuery('#content-button').live('click', function(event) {        

        if(jQuery('#content').is(":hidden")){
            jQuery(this).text("Hide Content");
            jQuery('#content').show();
          }
        else{
             jQuery(this).text("Show Content");
             jQuery('#content').hide();
        }
    });
});

Answer 5

使用.text更改按钮的文本

jQuery(document).ready(function(){
    jQuery('#content-button').live('click', function(event) {        
         jQuery('#content').toggle('show');
////////////////////////////code to change text
        if($('#content-button').text()=="Show Content")
        {
         $('#content-button').text('hide content');
        }
        else
        {
            $('#content-button').text('show content');

        }
       //////////////////////////// 

});});

http://jsfiddle.net/syctdh46/11/

Answer 6

尝试

jQuery(document).ready(function () {
    jQuery('#content-button').live('click', function (event) {
        jQuery('#content').toggle('show', function () {
            if ($(this).is(":visible")) {

                $('#content-button').text("Show Content");
            } else {
                $('#content-button').text("Hide Content");
            }

        });
    });
});

DEMO

Answer 7

大多数答案在这里是相似的。

为什么不创新并在此处添加自定义功能。

$.fn.toggleText = function(t1, t2){
  if (this.text() == t1) this.text(t2);
  else                   this.text(t1);
  return this;
};

然后只需编辑您的代码即可使用该功能。 因此，您可以在代码的其他任何地方使用此功能。 简化事情。

jQuery(document).ready(function(){
    jQuery('#content-button').live('click', function(event) {  
         $(event.target).toggleText('Show Content', 'Hide Content');  //Add this line          
         jQuery('#content').toggle('show');
    });
});