4

テキストの段落を表示しようとしていて、その下に「続きを読む」リンクがあり、リンクをクリックすると、さらにテキストが下にスライドし、リンクのテキストが「読む回数を減らす」と表示されるはずです。彼らがそれをクリックすると、テキストがスライドして元に戻り、リンクテキストが再び「続きを読む」になるはずです..

$('#more').click(function() {
                $('#the_more').slideToggle("slow", function () {
                      $('#more').html("Read Less");
                    });
});

誰でも問題を見つけますか？

4

1 に答える 1

6

私のコメントから：

文言は一方向にのみ変更されるため、「続きを読む」に戻ることはありません。それ以外は、これに付随する HTML を参照してください。

HTML が表示されるまでの間、動作する可能性のあるコードを次に示します。

$('#more').click(function() {
    $('#the_more').slideToggle("slow", function () {
        $('#more').text(function (index, text) {
            return (text == 'Read More' ? 'Read Less' : 'Read More');
        });
    });

    return false;
});

デモ: http://jsfiddle.net/yLvms/

コードは次のように機能します。

  1. クリック イベントは#more要素にバインドされており、クリックすると関数が起動します。
  2. 起動#the_moreすると、可視性の状態に応じて、要素が上下にスライドされたり、切り替えられたりします。
  3. slideToggle()テキストを変更する終了後にコールバックが発生します
  4. 内部のテキストは、 .text()#the_more関数の関数バリアントを使用して変更されます。これにより、変更のために現在のテキスト値が関数に渡されます。
  5. テキスト関数は、内部のテキストの現在の値をチェックする単純な3 値の#the_more場合であり、現在「もっと読む」の場合は「もっと読む」になり、その逆の場合はテキストのトグルになります。

それが役立つことを願っています。

于 2010-11-27T18:49:27.043 に答える