1

在修补了几个小时之后，我希望有人可以对此有所了解。

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

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

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

将鼠标悬停在列表 div 中的链接上。获取此链接的标题属性。更改 id 等于上面（在#viewarea 中）获得的标题属性的 div 以显示块。

因此，当将鼠标悬停在猴子链接上时，它将获取标题“monkeys”并在 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");
}
);

});

抱歉发了这么长的帖子，非常感谢。

4

1 回答 1

0 
$("#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/amiet/2/edit

于 2012-05-09T01:54:14.890 回答