根據鏈接的數據屬性在鼠標懸停時顯示/隱藏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中，我希望默認情況下在頁面加載時顯示標記為“ initial”的類-然后將鼠標懸停在其他類上時也可以隱藏。

尋找最簡單的優雅解決方案，謝謝！

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 on ready函數

$(".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選擇器將所有具有class floorplan-details div匹配，也沒有class initial 。 這似乎是一種顯示頁面加載時初始平面圖的更優雅的方法。

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

Answer 2

我將簡化HTML，使其更易於理解。

<div id="anchors">
    <a href="#" data-id="a" class="floorplan initial">a</a>
    <a href="#" data-id="b" class="floorplan">b</a>
    <a href="#" data-id="c" class="floorplan">c</a>
</div>

<div id="contents">
    <div id="a" style="display: none;">content a</div>
    <div id="b" style="display: none;">content b</div>
    <div id="c" style="display: none;">content c</div>
</div>

我的建議是使用display: none直接在內容div ，然后使用以下Javascript：

$(function() {
    $('a.floorplan').hover(function() {
        $('#contents div').hide();
        var divId = $(this).data('id');
        $('#' + divId).show();
    });

    $('a.floorplan.initial').trigger('mouseenter');    
});

trigger()方法允許您模擬事件並重用已為鏈接設置的邏輯。

Answer 3

雖然我將html的結構有所不同，但是如果我們要使用確切的html，我會這樣做：

$(function() {
  var currentElement = $(".initial").data('id');
  showElement(currentElement);

   $(".floorplan").hover(function() {
     hideElement(currentElement);
     showElement(this.dataset.id);
     currentElement = this.dataset.id;
   });

   function showElement(id){
     $("#" + id).parent().show();
   }

   function hideElement(id){
     $("#" + id).parent().hide();
   }

});