最初のjQueryプロジェクト - 変数をセレクタとして使用する

Question

私がやっていることは非常に簡単ですが、初心者としては非常に不満を感じています。

ここは私のfirst attempt just to give you the ideaです。

私は画像でもう少し気が向いていますが、これは解決策ではないことがすぐわかりました。画像が消えて恐ろしいものになる前に、マウスオーバーで画像が変わっていた。

私は、すべての画像を同じ場所に置き、非表示にして、対応するホットスポットのマウスオーバーで前面に表示すると考えました。 .css（）で要素のz-インデックス値を減らす方法があることを期待しています。

ここに私がいる場所（同じURL、9872_gangsters_moll_2nd_attempt.html）があります。

$(".hotspot").mouseover(function(){ 
      //Get the id of this triggered item 
      var imageid = $(this).attr("id"); 
      //use it to make corresponding image id to use as jQuery selector 
      var currentImg = '#img_'+ imageid; 
    //  alert(currentImg);     //shows variable is correct 
    //  $('.product-img').show();   //works fine with a class 
      $('currentImg').show();    //doesn't work with a variable 
      $('currentImg').addClass('front');  //same, obviously 
}); 

私はcssでの可視性を元に戻すことを試みましたが、jQueryの表示/非表示を使用しました。どちらもうまくいかなかった。問題はセレクタとして 'currentImg'を渡すことにあるようです。

あなたがこれを提供できるお手伝いは大変ありがたいです。

おかげで、

Answer 1

アンディはちょうどそれが（代わりに変数の）文字列リテラルを使用すること、引用符を削除します。 .idのようなものは、DOMプロパティです...、あなたは（あまり効率的.attr("id")ではなく）直接アクセスすることができます上記

$(".hotspot").mouseover(function(){ 
    var currentImg = '#img_'+this.id; 
    $(currentImg).show().addClass('front') 
}); 

その他の変更：$('currentImg')はこのように、ちょうど$(currentImg)でなければなりません。

Answer 2

$('currentImg').show();は、変数ではなく文字列リテラルを使用しています。引用符を取り除く。

Answer 3

アルファベットのセットを一重引用符または二重引用符で囲むと、文字列リテラルになります。 $（ 'currentImg'）と言うと、 'currentImg'という名前のhtmlタグを検索します。何が必要なのは、@Nickと@Davidで述べたように$（currentImg）です。