使用带有文本显示的 Jquery 切换文本答案

【问题标题】：Toggle Text with Jquery with Text Displays使用带有文本显示的 Jquery 切换文本
【发布时间】：2013-08-15 21:15:34
【问题描述】：

我正在使用 Jquery 来切换某些 P 标签的显示。单击“更多”时，将显示所有文本。我希望点击监听器在显示内容时说“更少”。在这一点上，它一直说“更多”。我需要在切换时将“更多”更改为“更少”。我已经能够通过删除允许显示和隐藏文本的类来实现这一点，这违背了目的，因为它正是我关心的功能。

工作文本显示：

http://jsfiddle.net/5UgfH/

工作更多/更少切换：

http://jsfiddle.net/LKJ5N/

<p> Please Help </p>

提前致谢。

【问题讨论】：

标签： javascript jquery html css toggle

【解决方案1】：

只需注释掉 h3 隐藏逻辑（来自您的第一个小提琴）：

 //$("#moretext").click(function () {
 //    $('h3', this).toggle();
 //});

检查这是否有效：http://jsfiddle.net/5UgfH/1/

【讨论】：

成功了！非常感谢。我认为该代码是必要的。非常感谢。

【解决方案2】：

看看这个插件，它应该可以解决问题。 jQuery expander

【讨论】：

我离得很近。我只是想获得我目前必须工作的代码。

【解决方案3】：

您实际上不必为此使用两个元素，只需交换文本即可。
你会这样做：

$(document).ready(function () {
    $(".showhidetext").hide();
    var more = $('<h3 />', {id   :'more', 
                            text :'MORE',
                            on   : {
                                    click: function() {
                                      $(".showhidetext").toggle();
                                      $(this).text(function(_,txt) {
                                          return txt == 'MORE'?'LESS':'MORE';
                                      })
                                    }
                                }
                            }
               );
    $('#moretext').append(more);
});

FIDDLE

请注意，ID 是唯一的，并且您在文档中只能有一次相同的 ID，因此请将 #showhidetext 改为一个类

【讨论】：

【解决方案4】：

试试这个：

$(document).ready(function () {
    $("#showhidetext").toggle()
    var more_texts = ['MORE','LESS'];
    var text_flag = 0;
         $("#moretext").click(function(){
             $('#showhidetext').toggle();
             $(this).text(more_texts[++text_flag%2]);
         });
});

这样您就不需要隐藏/显示触发文本.toggle()的文本，只需根据需要设置#showhidetext的样式

JSFiddle Demo

【讨论】：