jquery - jQuery セレクターの変数

Question

以下は、アニメーション ナビゲーション スキーム用に私が書いた jQuery コードです。

次のようにテスト用に書き出すと、コードはうまく機能しました。

$("#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");
                    });
                }
            });

しかし、ループに入れてjqueryセレクターで変数を使用しようとすると、機能しなくなりました。配列内の各文字列はsections、アンカー タグの ID とそれに対応する div 要素のクラスに対応します。

7行目まで実行されますが、 から始まる8行目と9行目$("."+sections[i])は動作しません。

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") )未定義になります。問題はセレクターにあると思いますが、それが何であるかわかりません。クラスセレクターではなく、IDセレクターが正常に機能しているようです。どんな提案でも大歓迎です！