如何改变页面大小的左属性(jQuery)

How to change the left attribute on page resize (jQuery)

本文关键字：属性 jQuery 何改变 改变      更新时间：2023-09-26

我的代码有点问题。我要做的是使这些元素的css属性'left'更新根据它的当前左值的差异，和数额的页面调整大小。这样，当页面调整大小和背景移动时，元素也会移动。看看下面的代码，我将描述这个问题:

$(window).resize(function() {
    var docWidth = $(window).width();
    if (docWidth < 1000) {
        var difference = 1000-docWidth;
        $('#headNav a,#icons div').each(function() {
            var left = $(this).position().left;
            var newLeft = left - difference;
            $(this).css({ 'left' : newLeft });
        });
    }
});

所以我得到的问题是元素被赋予了野数字的左值，而变量'newLeft'的值是合理的，期望的值。我认为每个函数是收集这些值的和，并为每个元素运行x次，找到的元素存在的次数(所以如果有5个元素，它运行5次，我的意思是。)我想要的是这段代码只对每个元素执行一次，但每个元素只执行一次，而不是每个元素执行10次!(这就是html中有多少个元素)。

所以我的问题是，如何做到这一点?我希望我解释得足够清楚，这是很难迭代的。非常感谢任何帮助。谢谢你！

这里有一个有趣的技巧:在.css()调用中包含+=:

$(this).css({left: "+=" + difference});

jQuery为您做数学计算以获得新值。

试试这个:

$(window).resize(function() {
    var docWidth = $(window).width();
    if (docWidth < 1000) {
        var difference = 1000-docWidth;            
        $('#headNav a,#icons div').each(function(iconInst) {
            var left = $("#" + iconInst).position().left;
            var newLeft = left - difference;
            $("#" + iconInst).css({ 'left' : newLeft });
        });
    }
});
相关文章：