使用带文本显示的Jquery切换文本

Toggle Text with Jquery with Text Displays

本文关键字：文本 Jquery 显示      更新时间：2023-09-26

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

工作文本显示：

http://jsfiddle.net/5UgfH/

工作更多/更少切换：

http://jsfiddle.net/LKJ5N/

<p> Please Help </p>

提前谢谢。

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

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

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

看看这个插件，它应该能做到。jQuery扩展器

您不需要使用两个元素，只需交换文本即可
你会这样做的：

$(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更改为类，而不是

试试这个：

$(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演示

相关文章：