3

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

工作文本显示：

http://jsfiddle.net/5UgfH/

工作更多/更少切换：

http://jsfiddle.net/LKJ5N/

<p> Please Help </p>

提前致谢。

4

4 回答 4

0

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

于 2013-08-15T21:17:37.953 回答
0

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

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

小提琴

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

于 2013-08-15T21:28:09.053 回答
0

尝试这个：

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

于 2013-08-15T21:31:44.190 回答
0

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

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

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

于 2013-08-15T21:23:50.060 回答