Question

我有这个页面：

CODE JS：

jQuery(document).ready(function ($) {
    var windowsize = $(window).outerWidth();   
    var stanga= jQuery('#secondary').outerWidth();
    var dreapta= jQuery('.right').outerWidth();
    var contentwh=windowsize-stanga-dreapta;
    $('#main-content').css('width',contentwh); 
});

我试过这里的所有内容在resize函数中都是一样的。

$(window).on('resize',function(){
var contentwh=windowsize-stanga-dreapta;
console.log('laatime content:',contentwh);
$('#main-content').css('width',contentwh);
});

遗憾的是，未更新宽度...与最初保持一致，在调整窗口大小时应该更改。

你能告诉我问题是什么以及为什么这段代码不起作用？

提前致谢！

Answer 1

您尚未在调整大小功能中定义windowsize，stanga或dreapta。

他们不是全局的开头，即使他们是，他们仍然会有他们的旧（预调整大小）值。

Answer 2

页面更改时，大小不会神奇地更新。您需要再次手动检查宽度。

jQuery(document).ready(function ($) {
    $(window).on("resize", function () {
        var windowsize = $(window).outerWidth(),   
            stanga= jQuery('#secondary').outerWidth(),
            dreapta = jQuery('.right').outerWidth(),
            contentwh = windowsize - stanga - dreapta;
        $('#main-content').css('width', contentwh);
    }).trigger("resize");
});

并且无需多次重复该功能，只需在调整大小时调用触发器。

为什么不更新这个元素的宽度？ JQuery的？

2 个答案: