使用jQuery，如何在加载时调整子元素的大小并调整大小

Question

我有一个非常基本的功能：

 function bx_thumbs() {
    pager_count = jQuery('.bx-pager').children().size();
    total_width = jQuery('.bx-pager').width();
    item_width_margin = pager_count*16;
    page_width = total_width-item_width_margin;
    item_width = page_width/pager_count;

    jQuery('.bx-pager a img').each(function(){
        jQuery(this).css('width',item_width+'px')
        console.log('hi' + total_width);        
    });  
}

jQuery(document).ready(function() {
  bx_thumbs();
});
jQuery(window).resize(function() {
  bx_thumbs();
 });

这样做的目的是将图像设置为宽度，使所有内容保持在一行上。

这在加载时效果很好。但是在我获得控制台日志时调整大小，图像会松开它们的宽度设置。

您可以在http://simpleandcrisp.com/pairings

看到这一点

我在我的css中设置了css max-width，这样如果js被取消激活它就不会炸毁页面...只是无法弄清楚为什么它在调整大小时不起作用。

提前致谢

Answer 1

上面的SegioCruz注意到：

试试这个：jQuery（document）.ready（function（）{jQuery（window）.resize（function（）{bx_thumbs（）;}）。trigger（'resize'）; //触发初始调整大小}）;