используйте цикл jQuery для установки свойств CSS

Question

Я пытаюсь использовать цикл jQuery, чтобы установить переменную, которая будет меняться при каждом прохождении цикла. переменная затем будет применена к свойству CSS. у меня проблема в том, что каждое свойство css с переменной имеет одно и то же значение (которое является значением в конце цикла).

pageArray = new Array('web1','web2','web3','web4');
    **leftTabHeight** = 0;
for (var p=0;p<pageArray.length;p++){
    **leftTabHeight** = parseFloat(p) *100;
    $('.left.main').addClass('flip_left');
    $('.left.main').css({'width':'482px', 'height':'668px', 'z-index':'11','background':'url("images/snake_tab.png") no-repeat, url("images/book_left_main.png") no-repeat','background-position': '0px '+**leftTabHeight**+'px, 42px 42px','position':'absolute'});

};

HTML:

<div class="web4 left main">
    <h3 class="left_button">web 4</h3>
<h4>web 4</h4>
<p>Stuff</p>
</div>
<div class="web4 left bind">    
</div>

<div class="web3 left main">
<h3 class="left_button">web 3</h3>
<h4>web 3</h4>
<p>stuff</p>
</div>
<div class="web3 left bind">    
</div>

<div class="web2 left main">
<h3 class="left_button">web 2</h3>
<h4>web 2</h4>
<p>Stuff</p>
</div>
<div class="web2 left bind">    
</div>

<div class="web1 left main">
<h3 class="left_button">web 1</h3>
<h4>web 1</h4>
<p>Stuff</p>
</div> 
<div class="web1 left bind">    
</div>

Итак, я хочу, чтобы у каждого класса было фоновое изображение, которое расположено по-разному. в настоящее время все они располагаются сверху на 300px.

Спасибо

Итак, я поместил console.log (leftTabHeight) внутри цикла, и он выводит 0, 100, 200, 300. Применяется только 300.

Answer 1

Хорошо, я понял, что проблема в том, что я каждый раз, когда функция зацикливалась, переписывал все элементы div. Мне нужно было добавить третий класс в выбор jQuery в качестве переменной. так что этот код работает:

pageArray = new Array('snake','web_s','web1','web2','web3','web4');
var leftTabHeight = 0;
for (var p in pageArray){
    leftTabHeight = parseFloat(p *100);
    $('.'+pageArray[p]+'.left.main').addClass('flip_left');
    $('.'+pageArray[p]+'.left.main').css({'width':'482px', 'height':'668px', 'z-index':'11','background':'url("images/snake_tab.png") no-repeat, url("images/book_left_main.png") no-repeat','background-position': '0px '+leftTabHeight+'px, 42px 42px','position':'absolute'});
};

Answer 2

Проблема в том, что вы имеете в виду все элементы ".left.main“. Измените эти строки на $('.'+pageArray[p]+'.left.main').css(...) и все.

Answer 3

Вы можете сделать что-то вроде:

var variable_position = 0;
$('.background_image').each(function(){
  $(this).css('background-position', '0px ' + variable_position + 'px 42px 42px');
  variable_position += 100;
});

Это предполагает, что ваши объекты, которые нуждаются в этом, имеют класс "background_image".