Question

我创建了一个切换按钮来显示和隐藏div，但是当我在#content div上切换'show'时，我希望按钮内的文字从'显示内容'更改为“隐藏内容”我还在学习jQuery，这有点过头了。任何帮助都会非常感激！

编辑：我发现因为我在一个页面上有很多帖子，并且所有帖子都重复了代码，当我点击按钮在一个帖子上显示内容时就会显示内容在所有帖子上。如何解决这个问题？

HTML

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

CSS ＃内容 { 显示：无; }

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的可见性，然后更改文本

Fiddle

修改

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

fiddle

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');
    });
});

Jquery：在切换'show'时更改按钮内的文本

7 个答案:

DEMO