jQuery更改追加onClick

时间:2012-12-28 18:23:29

标签: javascript jquery

我有以下jQuery代码,用于在页面上找到ul元素,在li元素中的第三个项目之后隐藏所有ul个项目,并附加“显示更多!“文本链接,在点击时显示/切换隐藏的列表项。

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

脚本功能的一个示例:http://jsfiddle.net/vf6j5/

以下是我希望脚本执行的操作:当点击“显示更多!”后显示隐藏元素时,我希望“显示更多!”< / em>要替换为“Show Less!”的文本。这样做会更加用户友好,并且更有意义。

关于如何实现这一目标的任何想法?

6 个答案:

答案 0 :(得分:5)

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

答案 1 :(得分:5)

看看这个:

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

答案 2 :(得分:4)

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

答案 3 :(得分:3)

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

答案 4 :(得分:0)

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

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

答案 5 :(得分:0)

由于您在点击活动中已经有this,因此只需在其上调用.text()

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