how to combine a variable with an ID in jQuery

Question

Hello i have actually a quiet simple question,

I have a counter running (a) and want to select an id with the counter: So if the counter (a) is "1", i expecte the ID #BG01 to be selected. But it don't do it. What am i declaring wrong ? i tried even +"a" to get a string but no.

Help please, thanks. ** Solved please see below the final code**

One question which came up during finalization: How can I pause the code for 1 sec, would like to pause the script while the top #BG fades in (not really a problem atm but you can see with a trained i the body BG for a split second, i assume thats because the script keeps on executing while css handles the transition so it would make sense to set it "onpause" for the time. i tried setTimeout but only with a length value it don't seems to work.. any ideas ? thanks

HTML:
<div id="container">
<div id="BG01"></div>
<div id="BG02"></div> 
<div id="BG03"></div> 
<div id="BG04"></div> 
</div>

jQuery:

var b=0,
    a=1;

setInterval ( function(){
if (b==0) { function() {
    $('#BG0' + a).css({
            "display": "block",
            "z-index": "10",
            "opacity": "1"});
    b=2;
    }
}
else {
    if (b===5) { function() {
        b=1;
        $('#BG0' + a).css("z-index", "1");
        $('#BG0' + b).css({
                    "z-index": "10",
                    "display": "block",
                    "opacity": "1"});
        $('#BG0' + a).css({
                    "z-index": "-99",
                    "display": "none",
                    "opacity": "0"});
        a=b;
        b=++b;
        }

    }
    else { function(){
        $('#BG0' + a).css("z-index", "1");
        $('#BG0' + b).css({
                    "z-index": "10",
                    "display": "block",
                    "opacity": "1"});
        $('#BG0' + a).css({
                    "z-index": "-99",
                    "display": "none",
                    "opacity": "0"});
        a=b;
        b=++b;          


        }

    }


}   
}, 5000);

Final working Code:

var y=0;
var x=1;

function divcycle(){
        $('#BG0'+ x).css("z-index", "1");
        $('#BG0'+ y).css({
                    "z-index": "10",
                    "opacity": "1"});
        $('#BG0'+ x).css({
                    "opacity": "0",
                    "z-index": "-99"});
        x=y;
        y=y+1;
}   

setInterval ( function(){
if (y==0) {
    $('#BG0' + x).css({
            "z-index": "10",
            "opacity": "1"});
    y=2;
}
else {
    if (y==5) {
        y=1;
        divcycle();
    }
    else { 
        divcycle();     
    }
}   
}, 10000);

possible duplicate of [How to use javascript variables in jquery selectors](http://stackoverflow.com/questions/5891840/how-to-use-javascript-variables-in-jquery-selectors) — JJJ, Sep 07 '15 at 23:01
sorry my bet i played with it around to get it working.. the +'a' should actually be + a was the remainder of testing sorry — NoZof, Sep 07 '15 at 23:04
the html is actually nothing special just some div's stacked. — NoZof, Sep 07 '15 at 23:06

blazerunner44 · Answer 1 · 2015-09-08T03:07:17.577

I think nothing happened because your example was riddled with syntax errors. I fixed all of the errors and it seems to work alright now.

Try it out on JSFiddle:

https://jsfiddle.net/h1Lqcaex/3/

var b=0;
var a=1;

function setInterval(){
if (b==0) {
    $('#BG0' + a).css({
            "display": "block",
            "z-index": "10",
            "opacity": "1"});
    b=2;

}
else {
    if (b===5) {
        b=1;
        $('#BG0' + a).css("z-index", "1");
        $('#BG0' + b).css({
                    "z-index": "10",
                    "display": "block",
                    "opacity": "1"});
        $('#BG0' + a).css({
                    "z-index": "-99",
                    "display": "none",
                    "opacity": "0"});
        a=b;
        b+=1;


    }
    else {
        $('#BG0' + a).css("z-index", "1");
        $('#BG0' + b).css({
                    "z-index": "10",
                    "display": "block",
                    "opacity": "1"});
        $('#BG0' + a).css({
                    "z-index": "-99",
                    "display": "none",
                    "opacity": "0"});
        a=b;
        b+=1;          


        }

    }


}
setInterval();

thats what i first tried -> var a=1; $('#BG0' + a).css("z-index", "1"); so i expected #BG01 to be selected but nothings happens... — NoZof, Sep 07 '15 at 23:09
@NoZof I changed my answer. Does the JSFiddle link look like it works alright? — blazerunner44, Sep 08 '15 at 03:08
yeah it helped in the sense that i saw my errors that i made :) big thanks for that. here is the working final code: i edited the main post because in here i don't get the code to look like readable code ,) — NoZof, Sep 09 '15 at 08:14

how to combine a variable with an ID in jQuery

1 Answers1