jQuery改变追加onClick答案

【问题标题】：jQuery change append onClickjQuery改变追加onClick
【发布时间】：2012-12-28 18:23:28
【问题描述】：

我有以下 jQuery 代码，它定位页面上的 ul 元素，隐藏该 ul 元素内第三个项目之后的任何 li 项目并附加一个 “显示更多！” 单击时显示/切换隐藏列表项的文本链接。

$('ul')
    .find('li:gt(2)')
    .hide()
    .end()
    .append(
        $('<li>Show More!</li>').click( function(){
        $(this).siblings().toggle(500);
        })
    );

脚本功能示例：http://jsfiddle.net/vf6j5/

这是我希望脚本执行的操作：当点击“显示更多！” 后隐藏元素显示出来时，我希望“显示更多！” 文本被替换为 “Show Less!”。这样做会更加用户友好，也更有意义。

关于如何实现这一点的任何想法？

【问题讨论】：

Button text toggle in jquery的可能重复

标签： javascript jquery

【解决方案1】：

看看这个：

$('ul')
        .find('li:gt(2)')
         .hide()
        .end()
        .append(
            $('<li class="title">Show More!</li>').click( function(){
            $(this).siblings().toggle(500);
                $(".title").html() === "Show More!"
                    ? $(".title").html("Show Less!")
                    : $(".title").html("Show More!")

            })
        );

Worked code

【讨论】：

如果有多个.title 元素？
那么我们需要更改代码。在这种情况下，该代码运行良好。如果您需要帮助，请向我展示您的问题示例。
您必须根据外部元素对其进行更改这一简单事实表明此解决方案很糟糕。

【解决方案2】：

http://jsfiddle.net/vf6j5/2/

$('ul')
    .find('li:gt(2)')
    .hide()
    .end()
    .append(
        $('<li>Show More!</li>').click(function() {
            var txt = $(this).text() == "Show More!" ? "Show Less!" : "Show More!";
            $(this).text(txt).siblings(':gt(2)').toggle(500);
        })
    );

【讨论】：

这是唯一只切换“额外”项目的答案，不切换前 3 个。

【解决方案3】：

$('ul').find('li:gt(2)').hide().end().append(
$('<li>Show More!</li>').click(function() {
    var $this = $(this);
    $this.siblings().toggle(500);
    $this.text(function(i, t) {
        return t === 'Show More!' ? 'Show Less!' : 'Show More!'
    })
}));

http://jsfiddle.net/aGeMp/

【讨论】：

【解决方案4】：

$('ul').find('li:gt(2)')
       .hide()
       .end()
       .append(
         $('<li>Show More!</li>').click(function() {
            $(this).text($(this).prev('li').is(':visible') ? 'Show More' : 'Show Less')
                   .siblings().toggle(500);
         })
       );

FIDDLE

【讨论】：

【解决方案5】：

非常简单 - 选择要更改的元素并修改其文本

$('#myButton').text('Show Less!');

【讨论】：

【解决方案6】：

既然点击事件中已经有this，只需调用.text()就可以了：

.... .click(function() {
  var that = $(this);
  that.siblings().toggle(500);
  that.text("Show less!");
});

【讨论】：