jquery扩展了崩溃效率

jquery expand collapse efficiency

本文关键字：效率 崩溃 扩展 jquery      更新时间：2023-09-26

我刚刚在我们网站的一部分实现了一个简单的扩展/折叠系统。我尝试了几个现有的解决方案，但只是觉得要调整网站以适应它太费力了，所以我写了自己的解决方案。

代码如下：

function hide(boxtohide, boxtomodify, expandbox) {
$('#' + boxtohide).hide(300);
$('#' + boxtomodify).css('background-image', 'url("images/new/date.png")');
$('#' + boxtomodify).css('height', '69px');
$('#' + expandbox).show(300);
}
function show(boxtohide, boxtomodify, expandbox, origheight, origurl) {
$('#' + expandbox).hide(300);
$('#' + boxtomodify).css('height', origheight);
$('#' + boxtomodify).css('background-image', 'url("'+origurl+'")');
$('#' + boxtohide).show(300);

}

背后的逻辑是：

  • 用户单击隐藏
  • 内容被隐藏
  • 内容包装器被替换为更薄的div
  • 内容包装器中显示的展开按钮（即它将替换原始内容）

并且反过来用于再次膨胀。

对我来说，代码只是感觉有点笨拙，我不是javascript高手，所以这里可能有点不深入，欢迎任何建议！

Dave

我建议的唯一明显的更改是$('#' + boxtomodify')行，它可以压缩为：

function hide(boxtohide, boxtomodify, expandbox) {
    $('#' + boxtohide).hide(300);
    $('#' + boxtomodify).css({
        'background-image' : 'url("images/new/date.png")'),
        'height' : '69px' });
    $('#' + expandbox).show(300);
}
function show(boxtohide, boxtomodify, expandbox, origheight, origurl) {
    $('#' + expandbox).hide(300);
    $('#' + boxtomodify).css({
        'height' : origheight
        'background-image' : 'url("'+origurl+'")' });
    $('#' + boxtohide).show(300);
}

我敢打赌，这种方法太复杂了，使用jQuery，你可以用最少的代码来完成这些事情，例如：

jsfiddle

$('.toggle').on('click', 'h3', function() {
    var $content = $(this).next('.content');
    $content.slideToggle('fast');
});

只需先在JS中获取每个元素，然后将这些CSS修改链接起来，就可以加快代码的速度，如下所示：

function hide(boxtohide, boxtomodify, expandbox) {
var hideElem = document.getElementById(boxtohide),
    modElem = document.getElementById(boxtomodify),
    expandElem = document.getElementById(expandbox),
    cssObj = { 'background-image' : 'url("images/new/date.png")',
               'height' : '69px' };
$(hideElem).hide(300);
$(modElem).css(cssObj);
$(expandElem).show(300);
}
相关文章：