0

もっと見る..問題 (もっと見る を 5 ～ 10 回クリックすると動作が遅くなる)

ここのコードに基づいて See More.. テクニックを修正しましたhttp://jsfiddle.net/hgxbf/ See More/See Less を 5 ～ 10 回クリックした後に直面している問題は、操作が本当に遅くなり、展開されません/適当につぶします。

       <div class="seeMore" />

スクリプトによって動的に追加されます

HTML 構造。

<div class="Blk">
    <div class="Title">
        Donec at elit sed metus placerat placerat congue ut purus
    </div>
    <p class="trunc">
                                    Proin ipsum lectus, facilisis sed ornare eget, egestas vel mi. Nullam ac odio arcu. Nunc congue, urna vitae malesuada consequat, leo erat bibendum nunc, et fringilla nibh diam ac tellus. Sed quis ante a ipsum placerat fermentum. Aliquam erat volutpat. Praesent rutrum ornare lectus tincidunt suscipit.
    </p>
    <div class="seeMore">
        <span>SEE MORE</span>
    </div>                          
</div>

私のコードhttp://jsfiddle.net/y4GXL/1/

どんな助けも本当に感謝しています！

4

1 に答える 1

2

ちょっと暇だったので、まとめてみました。

基本的に、「もっと見る/もっと見る」要素への参照を 1 つ保持し、状態変数を保持する必要があります。クリック ハンドラー内で、状態に応じてアクションを実行することを決定します。折りたたんだり、展開したり。状態が変化するたびに、「ボタン」のテキストと状態を更新します。

また、より便利な変数名を適用し (すべての jquery 要素の前にドルを付けます)、top 関数が.each;の結果を返すようにしました。そうしないと、jQuery チェーンが壊れます。

(function($) {
    $.fn.truncateText = function(maxWords) {
        return this.each(function() {
            var $el = $(this),
            origText = $el.text(),
            truncText = origText.split(' '),
            state,
            $toggleButton;

            // decide whether to place a button    
            if (truncText.length <= maxWords) {
                return;
            }

            truncText.length = maxWords;
            truncText = truncText.join(' ');

            // add button and define click handler    
            $toggleButton = $('<div class="seeMore"></div>')
                .insertAfter($el)
                .on('click', function() {
                    if ('open' == state) {
                        collapse(); // old state was open, so close it
                    } else {
                        expand(); // old state was closed, so open it
                    }
                });

            function collapse()
            {
                $el.text(truncText + ' ...');
                state = 'closed';
                $toggleButton.text('See More');
            }

            function expand()
            {
                $el.text(origText);
                state = 'open';
                $toggleButton.text('See Less');
            }

            collapse();
        });
    }
})(jQuery);
$(".trunc").truncateText(4);​

ここでの動作: http://jsfiddle.net/y4GXL/6/

于 2012-06-14T05:55:56.247 に答える