javascript - 根据显示初始 div 的链接的数据属性在鼠标悬停时显示/隐藏 div 内容

Question

我有一组链接:

<p><a href="#" class="floorplan initial" data-id="king"><strong>King</strong></a><br>
  4 Bedroom x 2.5 Bathrooms</p>
<p><a href="#" class="floorplan" data-id="wood"><strong>Wood</strong></a><br>
  3 Bedroom X 2.5 Baths</p>
<p><a href="#" class="floorplan" data-id="ash"><strong>The Ash</strong></a><br>
  3 Bedroom x 2.5 Bathrooms</p>
<p><a href="#" class="floorplan" data-id="well"><strong>The Well</strong></a><br>
  4 Bedroom x 3.5 Bathrooms</p>

等....

我想根据悬停或鼠标悬停在链接上来显示/隐藏 div 内容。 div 内容会一直保留，直到将鼠标悬停在另一个链接上。

这是显示/隐藏的 div 内容示例:

<div style="display:none">
<div id="king">
<h2>King</h2>
<p>KingText</p>
</div>
</div>

<div style="display:none">
<div id="wood">
<h2>Wood</h2>
<p>Wood Text</p>
</div>
</div>

<div style="display:none">
<div id="ash">
<h2>The Ash</h2>
<p>The Ash Text</p>
</div>
</div>

<div style="display:none">
<div id="well">
<h2>The Well</h2>
<p>The Well Text</p>
</div>
</div>

到目前为止，这是我的 jquery:

$(function() {
  $(".floorplan").hover(function() {
    var data_id = $(this).data('id');

  });
});

请注意 html 中标记为“初始”的类，我想让它默认显示在页面加载时 - 然后它也可以在悬停在其他人身上时隐藏。

寻找最简单优雅的解决方案，谢谢!

Answer 1

这是我会做的:

HTML

<p><a href="#" class="floorplan" data-id="king"><strong>King</strong></a>

    <br>4 Bedroom x 2.5 Bathrooms</p>
<p><a href="#" class="floorplan" data-id="wood"><strong>Wood</strong></a>

    <br>3 Bedroom X 2.5 Baths</p>
<p><a href="#" class="floorplan" data-id="ash"><strong>The Ash</strong></a>

    <br>3 Bedroom x 2.5 Bathrooms</p>
<p><a href="#" class="floorplan" data-id="well"><strong>The Well</strong></a>

    <br>4 Bedroom x 3.5 Bathrooms</p>

<div class="floorplan-details initial" id="king">
     <h2>King</h2>
    <p>KingText</p>
</div>

<div class="floorplan-details" id="wood">
     <h2>Wood</h2>
    <p>Wood Text</p>
</div>

<div class="floorplan-details" id="ash">
     <h2>The Ash</h2>
    <p>The Ash Text</p>
</div>

<div class="floorplan-details" id="well">
     <h2>The Well</h2>
    <p>The Well Text</p>
</div>

CSS

.floorplan-details:not(.initial) {
    display: none;
}

jQuery 就绪函数

$(".floorplan").hover(function () {
    var data_id = $(this).data('id');

    // Shows the hovered floorplan, hides others
    $('.floorplan-details').each(function() {
        var el = $(this);

        if(el.attr('id') == data_id)
            el.show();
        else
            el.hide();
    });
});

请注意，我将 initial 类移到了 div 中。 css 选择器匹配任何具有 floorplan-details 类但不具有 initial 类的 div。这似乎是一种在页面加载时显示初始平面图的更优雅的方式。

jsFiddle:http://jsfiddle.net/voveson/oxdg3bwf/1/