Как изменить левый атрибут при изменении размера страницы (jQuery) - PullRequest
Новая
       23

Как изменить левый атрибут при изменении размера страницы (jQuery)

1 голос
/ 13 июля 2011

У меня небольшие проблемы с моим кодом. То, что я пытаюсь сделать, это обновить свойство 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).

Итак, мой вопрос: как этого достичь? Надеюсь, я достаточно хорошо объяснил, это было сложно повторить. Любая помощь очень ценится. Спасибо!

Ответы [ 2 ]

2 голосов
/ 13 июля 2011

Вот забавный трюк: включите += в ваш .css() вызов: 

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

jQuery подсчитает, чтобы вы получили новое значение.

1 голос
/ 13 июля 2011

Попробуйте это: 

$(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 });
        });
    }
});
...