ダイナミックマウスセンター

Question

一部のdivに、imgタグを付け加えました。すべてのタグには固有のid = "theImg" + iがあり、 "i"は数字です。私は特定のimgにマウスオーバーし、スパンの内容を表示したい（番号も特定のIDを持つ）。ここまでは私のコードですが、動作しません。

var j; 
document.onmouseover = function(r) { 
    console.log(r.target.id); 
    j = r.target.id; 
} 

$(document).on({ 
    mouseover: function(e){ 
    $("span").show(); 
    }, 
    mouseleave: function(e){ 
    $("span").hide(); 
    } 
}, "img#"+j); 

Answer 1

imgの後にスパンがある場合、JavaScriptを使用しないことをお勧めしますか？ ;-)

CSSに:hover疑似クラスを使用して、常に確実に動作させることができます。

次の例考えてみましょう：あなたは、各 "theImg" +私のID "theSpan" と対応するスパンがあることを言って+ I（どちらも同じ番号）されています

img + span { 
 
    display: none; 
 
} 
 
img:hover + span { 
 
    display: block; 
 
} 
 

 
/*/ Optional styles /*/ 
 
div { 
 
    position: relative; 
 
    float: left; 
 
} 
 
div img + span { 
 
    position: absolute; 
 
    color: #fff; 
 
    background: #27ae60; 
 
    border: solid 1px #2ecc71; 
 
    border-radius: 50px; 
 
    z-index: 1; 
 
    bottom: 1em; 
 
    width: 80%; 
 
    left: 50%; 
 
    margin-left: -43%; 
 
    padding: 2% 3%; 
 
    text-align: center; 
 
}

<div> 
 
    <img src="https://placehold.it/400x200"> 
 
    <span>This is an image of a gray rectangle!</span> 
 
</div> 
 

 
<div> 
 
    <img src="https://placehold.it/200x200"> 
 
    <span>This is an image of a gray square!</span> 
 
</div> 
 

 
<div> 
 
    <img src="https://placekitten.com/g/400/200"> 
 
    <span>This is an image of a cute kitten inside a rectangle!</span> 
 
</div> 
 

 
<div> 
 
    <img src="https://placekitten.com/g/200/200"> 
 
    <span>This is an image of even cuter kitten inside a square!</span> 
 
</div>

Answer 2

だから、問題は、動的なセレクタ（「IMG番号」+ J）で、あなたのハンドラを設定するが、これは動作しませんしようとしているということです。 1つは、その方程式はjが未定義のときにページロード時に1回だけ評価されます。

だから、あなたの代わりにこれをしたい：

1. ターゲットオーバー...いっそのこと、あなたのマウスのための唯一のimgタグ、あなただけにイベントハンドラを添付することができますので、あなたの特別なイメージにすべて同じCSSクラスを与えますそれら。それはより効率的です。

2. イメージがマウスの上や外にマウスで移動しているときは、id属性を取得し、そこから番号を抽出し、それを使って表示する適切な範囲のセレクタを構築します。

   var get_span_from_image = function（image）{ var image_id = image.attr（ "id"）; var matches = image_id.match（/ theImg（\ d +）/）; if（matches）は$（ "theSpan" + matches [1]）を返します。 return $（）; //空のjQueryの選択を返します。 }; 。 $（ "IMG"）ホバー（ 関数（）{//マウスオーバー get_span_from_image（$（この））を表示（）; を}、 関数（）{//マウスアウト get_span_from_image（$（この））。hide（）; } ）;

注：への「リンク」2つのノード一緒に、より良い方法がありますが、これはちょうどあなたが持っている現在の構造を持つあなたの質問に答えることです。

UPDATE：

を二つのノードを一緒にリンクするためのいくつかのアイデアは、だからではなくid属性から番号を抽出しようとする、より良い方法は、それは兄弟だについて画像の1またはスパンのいずれかを伝えることであろう。あなたは、例えば、このような出力にHTMLを、可能性：もちろん

<img id="theImg1" data-target="theSpan1" class="hoverable" src="..."/> 
.... 
<span id="theSpan1">...</span> 

今、あなたの考えは何でもかまいません - あなたは、番号の値か何かを使用する必要はありません。

次に、あなたのホバーコードは非常に単純に次のようになります。

var get_span_from_image = function(image) { 
    var span_id = image.data("target"); 
    return $("#" + span_id); 
}; 
$("img").hover(
    function() { // mouse over 
     get_span_from_image($(this)).show(); 
    }, 
    function() { // mouse out 
     get_span_from_image($(this)).hide(); 
    } 
); 

は、この情報がお役に立てば幸い！