CODEWITHSUNDEEP
jqueryarraysfor-loopjquery-selectors
B.B.
B.B.

Reputation: 13

Variables in jQuery selectors

Below is some jQuery code I wrote for an animated navigation scheme.

The code worked well when I had it written out for testing like so:

$("#about").click(function(e) {
                e.preventDefault();
                if ( !$(".current").hasClass("about") ){
                    $("body").css("overflow-x","hidden");
                    $(".current").animate({left:'-1500px'}, 500).slideUp(500);
                    $(".about").animate({left:'+3000px'}, 1).delay(500).slideDown();
                    $(".about").animate({left:'0px'}, 500, function(){
                            $(".current").removeClass("current");
                            $(".about").addClass("current");
                            $("body").css("overflow-x","visible");
                    });
                }
            });

But when I tried to put it in a loop and use variables in the jquery selectors, it stopped working. Each string in the sections array corresponds to an anchor tag's id and its matching div element's class.

It runs up until line 7, but lines 8 and 9, starting with $("."+sections[i]), do not work. 

var sections = ["about","photography","contact"];
for (var i=0; i<sections.length; i++) {
                $("#"+sections[i]).click(function(e) {
                    e.preventDefault();
                    if ( !$(".current").hasClass(sections[i]) ){
                        $("body").css("overflow-x","hidden");
                        $(".current").animate({left:'-1500px'}, 500).slideUp(500);
                        $("."+sections[i]).animate({left:'+3000px'}, 1).delay(500).slideDown();
                        $("."+sections[i]).animate({left:'0px'}, 500, function(){
                                $(".current").removeClass("current");
                                $("."+sections[i]).addClass("current");
                                $("body").css("overflow-x","visible");
                        });
                    }
                });

            }

console.log( $("."+sections[i]).attr("class") ) gives me undefined. I think the problem is with the selector, but I can't figure out what it is. The id selector seems to work fine, just not the class selector. Any suggestions appreciated!

Upvotes: 1

Views: 557

Answers (1)

PSL
PSL

Reputation: 123739

The reason why your code doesnot work is because you are just registering the event in the for loop but not creating the closure variable i to be used in the respective handler. By the time your handler executes. "i" will be 3, after the last iteration increment of the for loop (after registering the event for the last element in the array) and it stays there so you are trying to look for sections[3] always which is undefined.

Keep it simple:

Join the selectors at once and just register your handler once, and inside your handler you are trying to referring to its own id by doing sections[i] you could just use this.id to get the id and use it in the handler.

var sections = ["about", "photography", "contact"];
var selector = '#' + sections.join(',#'); //get your selector joined here.

    $(selector).click(function (e) {
        e.preventDefault();
        var id = this.id; // in your code sections[i] is same as id of the clicked element. SO just use this id.
        if (!$(".current").hasClass(id)) { 
            $("body").css("overflow-x", "hidden");
            $(".current").animate({
                left: '-1500px'
            }, 500).slideUp(500);
            $("." + id).animate({
                left: '+3000px'
            }, 1).delay(500).slideDown();
            $("." + id).animate({
                left: '0px'
            }, 500, function () {
                $(".current").removeClass("current");
                $("." + id).addClass("current");
                $("body").css("overflow-x", "visible");
            });
        }
    });

Upvotes: 2

Related Questions