イメージIDを関数に渡し、show/hide（）;

Question

IDがimg01、img02、img03、img04の4つの画像があります。

別の4つの画像が配列に追加され、IDがhover01、hover02、hover03、hover04などの前述の各画像に関連していることが示されます。

それぞれに関連するホバーイメージを表示するための共通の関数を書くにはどうすればよいですか？つまり、マウスが画像の上にくるたびに、引数を関数に渡して表示する必要があります。

希望は意味があります。

Answer 1

$("img[id^=img]").each(function() { 
    var number = (this.id + "").replace("img", ""); 
     relatedImg = $("#hover" + number); 
}); 

$("img[id^=img]")imgで始まるIDを有する全ての画像を選択します。

relatedImgはホバーイメージです。

---

var getHover = function(myId) { 
    var number = (myId + "").replace("img", ""); 
    return $("#hover" + number); 
} 

var hoverImage = getHover("img01"); 

すでにIDを持っている場合は、ホバー画像を取得するためにgetHoverを使用することができます。

Answer 2

あなたはこのようなIMGタグを持っていたと仮定すると：

​<img class="hoverImage" id="img01" src="xxx">​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

をあなたは/、ホバー画像のIDを取得するには、このようなコードを使用末尾から番号を抽出し、その上に新しいプレフィックスを追加して示すことができましたその新たに構築されたIDと画像を隠す：

function makeHoverSelector(str) { 
    var matches = str.match(/\d+$/); 
    if (matches) { 
     return("#hover" + matches[0]); 
    } 
    return("#missingImage"); 
} 

$(".hoverImage").hover(function() { 
    $(makeHoverSelector(this.id)).toggle(); 
});​