Question

经过几个小时的修补，我希望有人可以对此有所了解。

我有两个div并排。在右侧有一个包含div id = list的链接列表。在左侧有viewarea div，它将在悬停时显示链接的图片和描述。因此，当您将鼠标悬停在某个链接上时，它应该在左侧显示一个特定于该div的div。但是，我想为此添加一些自动化。

基本上将鼠标悬停在列表div中的链接上，将切换左侧div的显示以显示块。显示图片和描述的隐藏div id的名称与列表div中链接的title属性相同。因此，在悬停时，链接应该切换div的显示，其id等于要显示的标题：block。

所以基本上我的脚本逻辑就是这样的：

将鼠标悬停在列表div中的链接上。获取此链接的标题属性。将id等于上面得到的title属性（在#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脚本。我知道我需要某种类似.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

Jquery Hover获取标题属性和显示Div

1 个答案: