Question

我编写了一些jQuery函数来调整图像大小，保持页面加载的宽高比，并调整窗口大小。这些功能运行良好，但我专门为一个场景构建它们。现在，出现了另一种类似的情况，我必须做几乎相同的功能，只有iFrames。为了成为更好的编码器，而不是添加额外的代码，我如何能够简洁有效地在网站上为iFrame重复使用这些功能，以及$('.com-background > img')场景？

这是jQuery：

function imageCalc() {
    $imgWidth = $('.com-background > img').width();
    $imgHeight = $('.com-background > img').height();
    $imgAspectRatio =  $imgHeight / $imgWidth;
    $('.com-background > img').css('margin-left', '-10px' );

}
function setImageDims() {
    $('.com-background > img').css('height', function( calcHeight ) { return $imgAspectRatio * $('#main-content').width(); });
    $('.com-background > img').css('width', function( calcWidth ) { return $('#main-content').width() + 20; }); 
}

function imageResize() {
    $('.com-background > img').css('width', function( resizeWidth ) { return $("body").width() });
    $('.com-background > img').css('height', function( resizeHeight ) { return $imgAspectRatio * $('.com-background > img').width();  });
}

Answer 1

评论意味着@nnnnnn是：

更新函数以将选择器作为参数而不是硬编码吗？

转过来：

function imageCalc() {
    $imgWidth = $('.com-background > img').width();
    $imgHeight = $('.com-background > img').height();
    $imgAspectRatio =  $imgHeight / $imgWidth;
    $('.com-background > img').css('margin-left', '-10px' );

}

对此：

//where selector is your string query
function imageCalc(selector) {
    $imgWidth = $(selector).width();
    $imgHeight = $(selector).height();
    $imgAspectRatio =  $imgHeight / $imgWidth;
    $(selector).css('margin-left', '-10px' );

}

上述更改会使您的函数泛型，只要您通过选择器指定要更改的内容，您就可以对其他DOM对象执行相同操作论点。为了做你现在正在做的事情，你必须打电话给imageCalc('.com-background > img');，依此类推。

由此，

此外，与您的问题无关，请缓存您的jQuery对象，不要继续在同一个函数中重新选择相同的元素

他的意思是：

//where selector is your string query
function imageCalc(selector) {
    var obj=$(selector);
    $imgWidth = obj.width();
    $imgHeight = obj.height();
    $imgAspectRatio =  $imgHeight / $imgWidth;
    obj.css('margin-left', '-10px' );

}

这样做是缓存您的对象，这意味着您只需找到它一次，并重用该对象。它会对性能产生影响，因为每次使用$(selector)时，都会重新搜索DOM树以找到一个元素，这需要花费时间。

扩大功能范围

1 个答案: