Jquery Hoverタイトルの属性と表示部を取得

Question

これを数時間試した後、私は誰かがこれについていくつかの洞察を得られることを望んでいます。

私は2つのdivsを並べています。右側には、div id =リストを含むリンクのリストがあります。左側にはviewarea divがあり、ホバー上のリンクの画像と説明が表示されます。したがって、リンク上にマウスを置くと、そのdivに固有のdivが左側に表示されます。しかし、私はこれに少しの自動化を追加したいと思います。

基本的には、リストdiv内のリンクにカーソルを置くと、左側のdivの表示が表示ブロックに切り替わります。画像と説明を表示する隠しdiv idには、リストdivのリンクのタイトル属性と同じ名前が付けられます。そのため、ホバー上でリンクは、表示するタイトルと等しいidを持つdivの表示を切り替える必要があります：ブロック。

だから、基本的に私のスクリプトロジックはこのようなものになるだろう：リストのdiv内のリンクの上にホバーで

。 このリンクのタイトル属性を取得します。 idを持つdivを、上記のtitle属性（#viewarea内）と同じに変更してブロックを表示します。

サルのリンク上をホバーすると、「サル」のタイトルが表示され、viewarea divのdiv id = "monkeys"の表示が切り替わります。ここで

はラフなHTML/CSSコードです：

#list { 
width: 480px; 
float: right; 
} 

#viewarea { 
width: 480px; 
} 

<div id="list"> 

<h1> 
Animals 
</h1> 
<p> 
<a href="monkeys_link" title="monkeys">Monkeys</a> 
</p> 
<p> 
<a href=”kittens_link" title="kittens">Kittens</a> 
</p> 
<p> 
<a href="pigs_link" title="pigs">Pigs</a> 
</p> 

</div> 

<div id="viewarea"> 

<div id="monkeys" style="display: none;"> 
<img src="picture_of_monkeys.jpg"></img> 
Summary text 
</div> 

<div id="kittens" style="display: none;"> 
<img src="picture_of_kittens.jpg"></img> 
Summary text 
</div> 

<div id="pigs" style="display: none;"> 
<img src="picture_of_pigs.jpg"></img> 
Summary text 
</div> 

</div> 

これは私が外部のjqueryのスクリプトのためになってしまったものです。私は、それぞれのようなループ構造を必要としていることは知っていますが、私はそれを動かすことができませんでした。正しい軌道にいるのですか？

$(document).ready(function() { 

var title1 = $("#list a").attr("title"); 


$("#list a").hover(
function() { 
$("#" + "title1").css("display", "block"); 
}, 
function() { 
$("#" + "title1").css("display", "none"); 
} 
); 

}); 

申し訳ありませんが、長い投稿のため、ありがとうございます。

Answer 1

$("#list") 
    // On mouseenter and mouseleave, we want to react 
    .on("mouseenter mouseleave", "a", function(e){ 
    // Find the element whose id matches our current title 
    var el = $("#" + this.title); 
    // Determine if we're entering or exiting the link 
    switch (e.type) { 
     // Show the element or hide the element 
     case "mouseenter" : el.show(); break; 
     case "mouseleave" : el.hide(); 
    } 
    }); 

デモ：http://jsbin.com/amitet/2/edit