javascript - jQuery 変更追加 onClick

Question

ulページ上の要素を検索し、liその要素内の 3 番目の項目の後の項目を非表示にし、 「もっと表示!」ulを追加する次の jQuery コードがあります。クリックすると非表示のリスト項目を表示/切り替えるテキストリンク。

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

スクリプトの機能の例: http://jsfiddle.net/vf6j5/

スクリプトに実行してもらいたいことは次のとおりです。がクリックされたら、「Show More!」をお願いします。「Show Less!」に置き換えられるテキスト . これを行うと、はるかにユーザーフレンドリーになり、もう少し理にかなっています.

これをどのように達成できるかについてのアイデアはありますか?

score 5 · Accepted Answer

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

score 5 · Accepted Answer

これを見てください：

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

            })
        );

働いたコード

score 4 · Accepted Answer

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

score 3 · Accepted Answer

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

フィドル

score 0 · Accepted Answer

非常に簡単です-変更する要素を選択し、そのテキストを変更します

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

score 0 · Accepted Answer

すでにthisクリックイベントを持っているので、それを呼び出すだけ.text()です:

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

javascript - jQuery 変更追加 onClick

6 に答える 6

Related

Reference