[英]use jQuery loop to set css properties
I am trying to use a jQuery loop to set a variable that will change in each pass through the loop. 我正在尝试使用jQuery循环来设置一个变量,该变量在每次通过循环时都会改变。 the variable would then be applied to a css property. 然后将该变量应用于css属性。 the problem I have is that every css property with the variable has the same value (which is the value at the end of the loop). 我的问题是每个带有变量的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: 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>
So I want each class to have a background image that is positioned differently. 因此,我希望每个班级都有一个位置不同的背景图像。 currently they all stack on top at 300px. 目前,它们都以300px堆叠在顶部。
Thanks 谢谢
So, I've placed a console.log(leftTabHeight) within the loop and it does print 0, 100, 200, 300. The 300 is the only one being applied. 因此,我在循环中放置了console.log(leftTabHeight),它确实打印了0、100、200、300。300是唯一被应用的。
You could do something like: 您可以执行以下操作:
var variable_position = 0;
$('.background_image').each(function(){
$(this).css('background-position', '0px ' + variable_position + 'px 42px 42px');
variable_position += 100;
});
That is assuming your objects that need this have the class "background_image". 假设需要此对象的对象具有“ background_image”类。
Okay I've figured this out the problem was I each time the function looped it rewrote all the divs. 好的,我已经弄清楚了这个问题是我每次函数循环时都会重写所有div。 I needed to add the third class into the jQuery selection as a variable. 我需要将第三个类作为变量添加到jQuery选择中。 so this code works: 所以这段代码有效:
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'});
};
问题是您要引用所有".left.main“
项。将这些行更改为$('.'+pageArray[p]+'.left.main').css(...)
,它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.