Javascript jQuery更改追加onClick

我有下面的jQuery代码，它在页面上定位

ul

元素，在该

ul

元素的第三个项目之后隐藏任何

li

项目，并附加一个“Show More！”文本链接，单击时显示/切换隐藏的列表项目

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

$（'ul'）
.find（'li:gt（2）'
.hide（）
(完)
.附加(
$（“
显示更多！
”）。单击（函数（）{
$（this）.sides（）.toggle（500）；
})
);

脚本功能示例：

下面是我希望脚本做的事情：当单击“Show More！”后显示隐藏元素时，我希望“Show More！”文本替换为“Show Less！”。这样做将更加方便用户，并且更有意义

---

关于如何实现这一点有什么想法吗？

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

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

---

由于您在单击事件中已经有了

此

，只需在其上调用

.text（）

：

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

$（'ul'）.find（'li:gt（2）'）.hide（）.end（）.append(
$（“
显示更多！
”）。单击（函数（）{
var$this=$（this）；
$this.sillides（）.toggle（500）；
$this.text（函数（i，t）{
return t==“显示更多！”？“显示更少！”：“显示更多！”
})
}));

$（'ul'）
.find（'li:gt（2）'
.hide（）
(完)
.附加(
$（“
显示更多！
”）。单击（函数（）{
var txt=$（this.text（）==“显示更多！”？“显示更少！”：“显示更多！”；
$（this.text（txt）.sides（':gt（2）'））.toggle（500）；
})
);​

看看这个：

$('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!")

            })
        );

$（'ul'）
.find（'li:gt（2）'
.hide（）
(完)
.附加(
$（“
显示更多信息！
”）。单击（函数（）{
$（this）.sides（）.toggle（500）；
$（“.title”）.html（）=“显示更多信息！”
？$（“.title”）.html（“少显示！”）
：$（“.title”）.html（“显示更多信息！”）
})
);

$（'ul'）。查找（'li:gt（2）'
.hide（）
(完)
.附加(
$（“
显示更多！
”）。单击（函数（）{
$（this）.text（$（this）.prev（'li'）。是（':visible'）？“显示更多”：“显示更少”）
.兄弟姐妹（）.切换（500）；
})
);​

---

元素可能重复，如果有多个

.title

元素，则需要更改代码。在这种情况下，代码运行良好。如果您需要帮助，请向我展示您的问题示例。您必须根据外部元素对其进行更改这一简单事实表明此解决方案是不好的。这是唯一只切换“额外”项的答案，并且不会切换前3项。

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

$('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!")

            })
        );

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