Attempting to utilize a jQuery loop to set a variable that will vary in each iteration through the loop. The plan is for this variable to be assigned to a css property. However, the issue arises where every css property containing the variable ends up with the same value (which ultimately reflects the value at the end of the loop).
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>
Each class should ideally have a unique background image position, but currently they all overlap at 300px.
Thank you
After inserting a console.log(leftTabHeight) within the loop, it was observed to print 0, 100, 200, 300. Despite this, only the value 300 is being applied.