jquery - 根据其他元素宽度即时更改元素宽度

Question

由于我在脚本方面不够好，我找不到正确的语法。

请看下面的图片。div.dependable我需要设置width为X + 16px，即使在调整窗口大小时。

我有非常相似的例子，请看代码http://demuri.lv。尝试在那里调整窗口大小 - 蓝色块将始终位于水平和垂直中心。但我无法弄清楚正确的编码。

jQuery，Modernizr 已加载。

Answer 1

您必须点击窗口调整大小事件并确保在 doc.ready 循环中使用

$(document).ready(function(){
    $(window).resize(function() {
        var x = ($(window).width() - $('div#mainwrap').width())/2;
        var targ_w = (x+16) + "px";
        $('div.dependable').css({'width': targ_w});
    });
});

Answer 2

如果我理解正确，这意味着 X 是窗口宽度的值 - #main-wrap 宽度，然后将其除以 2 以获得每一边的宽度。您必须确保在加载 DOM 时以及每次调整窗口大小时调用此函数。

jQuery(document).ready(function($){
    calcDependable();
});

$(window).resize(calcDependable);

function calcDependable(){
    var x = ($(window).width() - $("#main-wrap").width())/2;
    x = (x < 0 ) ? 0 : x; // make sure value is always 0 or above
    $(".dependable").width(x+16);
}

Answer 3

您必须首先挂钩resize事件，从左侧window找出包装器的 ，然后相应地修改元素的 ，如下所示：offsetwidth

$(window).on('resize', function (){

    var leftOffset = $('#main-wrap').offset().left;
    $('.dependable').css('width', leftOffset + 16);

});

这将按照您的要求进行，但我还建议您首先添加相同的语句，以便在$(document).ready.

jQuery(document).ready(function ($){

    var leftOffset = $('#main-wrap').offset().left;
    $('.dependable').css('width', leftOffset + 16);

});

Working demo

为了坚持DRY 代码的原则，您可能希望将代码包装在函数语句中；强烈建议这样做。也许像这样：

function offsetPlusX(targetElement, x){

    var leftOffset = $('#main-wrap').offset().left;
    targetElement.css('width', leftOffset + x);

}