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

【问题标题】：Jquery: changing text inside a button when toggle 'show'Jquery：切换“显示”时更改按钮内的文本
【发布时间】：2014-09-22 09:48:22
【问题描述】：

我创建了一个切换按钮来显示和隐藏一个 div，但我希望按钮内的文本在您切换 #content div 上的“显示”时从“显示内容”更改为“隐藏内容” . 这有点过头了，因为我还在学习 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/

【问题讨论】：

jsfiddle.net/syctdh46/8
要停止将您的代码应用于所有其他具有相同 id 的 div，请使用 .stopPropagation()
@MarsOne 谢谢你，我会在这个小提琴的哪里添加代码？ jsfiddle.net/syctdh46/5
在 .click 函数中。 event.stopPropagation();jqfundamentals.com/chapter/events
jsfiddle.net/syctdh46/14

标签： javascript jquery

【解决方案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();
});

【讨论】：

嗨，我喜欢这个解决方案。但是我发现我的代码存在一个问题，因为它在同一页面上的许多帖子中重复出现，单击一个“显示内容”按钮将显示所有帖子上的内容，因为所有帖子中都存在 .content。怎么可能这被修改为只选择 .content-button 的父 div 中的 .content？我已经编辑了我上面的帖子以显示代码

【解决方案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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

使用.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/

【讨论】：

【解决方案5】：

试试

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

【讨论】：

@RajaprabhuAravindasamy poda panii ..我知道你是谁

【解决方案6】：

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

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

【讨论】：

【解决方案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');
    });
});

【讨论】：