jQuery懸停獲取標題屬性並顯示Div

Question

修改了幾個小時后，我希望有人可以對此有所了解。

我有2個div並排。 在右側有一個鏈接列表，其中包含div id = list。 在左側的viewarea div將顯示圖片和懸停鏈接的說明。 因此，當您將鼠標懸停在鏈接上時，它應該在左側顯示該div專用的div。 但是，我想為此增加一些自動化。

基本上，將鼠標懸停在列表div中的鏈接上時，將在左側切換div的顯示以顯示塊。 將顯示圖片和描述的隱藏div ID與列表div中的鏈接的title屬性相同。 因此，在懸停時，鏈接應然后切換ID為等於display：block標題的div的顯示。

所以基本上我的腳本邏輯是這樣的：

將鼠標懸停在列表div中的鏈接上時。 獲取此鏈接的標題屬性。 更改ID等於上面（在#viewarea中）獲得的title屬性的div以顯示塊。

因此，當將鼠標懸停在猴子鏈接上時，它將以標題“ monkeys”命名，並在viewdiv 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腳本編寫的內容。 我知道我需要某種循環結構，例如.each，但是我無法使其工作。 我在正確的軌道上嗎？

$(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