javascript - 查看更多..问题(点击查看更多5-10次后操作变慢)

Question

查看更多..问题(点击查看更多5-10次后操作变慢)

我已经修改了查看更多..基于此处代码的技术 http://jsfiddle.net/hgxbf/ 我面临的问题是，点击“查看更多/查看更少”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/

非常感谢任何帮助!

Answer 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/