Jquery 性能问题显示/隐藏多个div

我有一个相当广泛的标题和定义列表，其中应用了显示/隐藏效果。我从大量的文本和项目中推测，这种情况发生的速度几乎令人痛苦。我最初使用另一个源代码，所以这不是我的工作。我知道触发效果的“阅读更多”链接设置为在页面加载后进入…这可能是我的问题的另一个原因。我不完全确定它是否需要这样的结构，但我在这里是个新手，只能依靠逻辑来解决当前的故障

剧本

$(function(){
    var slideHeight = 36; // px
     $('.jswrap').each(function(){
        var defHeight = $(this).height();
        if(defHeight >= slideHeight){
            $(this).css({'height':slideHeight,'max-height': defHeight});
            $(this).after($('<div class="jsreadmore"><a href="#">Read More</a></div>'));
        }

        $('.jsreadmore a').click(function(){
            var $targetSlide = $(this).parent().prev(),
                curHeight = $targetSlide.height(),
                defHeight = $targetSlide.css('max-height');
            if(curHeight == slideHeight){
                $targetSlide.animate({
                  height: defHeight
                }, "normal");
                $targetSlide.next().children('a').html('Close');
            }else{
                $targetSlide.animate({
                  height: slideHeight
                }, "normal");
                $targetSlide.next().children('a').html('Read More');
            }
            return false;
        });
    });
 });

链接到该页面

---

当DOM中有大量项时，任何浏览器都会过载。我知道的最简单的方法是不要一次将它们全部加载到DOM中，而只在ajax需要时加载它们。您还可以在向下滚动页面时动态加载它们。您也可以在使用完项后从DOM中删除它们，但是有些浏览器不太擅长从内存中删除它们，并且可能会继续使浏览器陷入困境。

将事件处理程序绑定到jQuery each循环之外，否则您会将同一个事件侦听器绑定到所有“读取更多”事件在循环完成之前，DOM中当前可用的元素会反复出现

像这样：

$(function(){
    var slideHeight = 36;

    $('.jswrap').each(function(){
        var defHeight = $(this).height();

        if(defHeight >= slideHeight){
            $(this).css({'height':slideHeight,'max-height': defHeight});
            $(this).after($('<div class="jsreadmore"><a href="#">Read More</a></div>'));
        }
    });

    $('.jsreadmore a').click(function(){
        var $targetSlide = $(this).parent().prev(),
            curHeight = $targetSlide.height(),
            defHeight = $targetSlide.css('max-height');

        if(curHeight == slideHeight){
            $targetSlide.animate({
                height: defHeight
            }, "normal");
            $targetSlide.next().children('a').html('Close');
        }else{
            $targetSlide.animate({
                height: slideHeight
            }, "normal");
            $targetSlide.next().children('a').html('Read More');
        }
        return false;
    });
});

$（函数（）{
var SlidehHeight=36；
$（'.jswrap'）。每个（函数（）{
var defHeight=$（this.height（）；
如果（定义高度>=滑块高度）{
$（this.css（{'height'：slideHeight，'max-height'：defHeight}）；
$（本）。在（$（''）之后；
}
});
$（'.jsreadmore a'）。单击（函数（）{
var$targetSlide=$（this.parent（）.prev（），
curHeight=$targetSlide.height（），
defHeight=$targetSlide.css（'max-height'）；
如果（curHeight==滑块高度）{
$targetSlide.animate({
高度：除雾高度
}“正常”）；
$targetSlide.next（）.children（'a'）.html（'Close'）；
}否则{
$targetSlide.animate({
高度：滑块高度
}“正常”）；
$targetSlide.next（）.children（'a'）.html（'readmore'）；
}
返回false；
});
});

您可以进一步将其转换为委托：

$('.jsreadmore').delegate('a', 'click', function(){
    var $targetSlide = $(this).parent().prev(),
        curHeight = $targetSlide.height(),
        defHeight = $targetSlide.css('max-height');

    if(curHeight == slideHeight){
        $targetSlide.animate({
            height: defHeight
        }, "normal");
        $targetSlide.next().children('a').html('Close');
    }else{
        $targetSlide.animate({
            height: slideHeight
        }, "normal");
        $targetSlide.next().children('a').html('Read More');
    }
    return false;
});

---

这给你带来的好处是，你实际上有一个事件处理程序在引擎盖下处理所有的a，如果你动态创建更多的a，代理将已经处理它们，而不像单击处理程序。

那么你的问题是什么？我可以对脚本做些什么来提高效率或执行更好？或者，有没有更适合我的剧本请在你的问题中加上这些句子。这就是它们所属的位置。是“$”（这是（$（'div class=“jsreadmore…”行之后的“$”）吗？我不确定事件列表是什么。对不起，新手可能有点过时……当您添加事件侦听器时，您将函数绑定到触发事件时执行的事件，在本例中是“$”.jsreadmore a'）。单击（function（）{…}）；“该死，这造成了巨大的变化。这正是我所追求的。我知道有问题，只是不知道如何解决…谢谢。那么事件侦听器是顶部部分？从“$（'.jswrap…到…Read More'））}”）；？对吗？事件处理程序就是您传递给$（）.click（…）情况显然不是这样，因为DOM中的元素数量相对较少

$(function(){
    var slideHeight = 36;

    $('.jswrap').each(function(){
        var defHeight = $(this).height();

        if(defHeight >= slideHeight){
            $(this).css({'height':slideHeight,'max-height': defHeight});
            $(this).after($('<div class="jsreadmore"><a href="#">Read More</a></div>'));
        }
    });

    $('.jsreadmore a').click(function(){
        var $targetSlide = $(this).parent().prev(),
            curHeight = $targetSlide.height(),
            defHeight = $targetSlide.css('max-height');

        if(curHeight == slideHeight){
            $targetSlide.animate({
                height: defHeight
            }, "normal");
            $targetSlide.next().children('a').html('Close');
        }else{
            $targetSlide.animate({
                height: slideHeight
            }, "normal");
            $targetSlide.next().children('a').html('Read More');
        }
        return false;
    });
});

$('.jsreadmore').delegate('a', 'click', function(){
    var $targetSlide = $(this).parent().prev(),
        curHeight = $targetSlide.height(),
        defHeight = $targetSlide.css('max-height');

    if(curHeight == slideHeight){
        $targetSlide.animate({
            height: defHeight
        }, "normal");
        $targetSlide.next().children('a').html('Close');
    }else{
        $targetSlide.animate({
            height: slideHeight
        }, "normal");
        $targetSlide.next().children('a').html('Read More');
    }
    return false;
});