Javascript 基于链接的数据属性在鼠标上方显示/隐藏div内容，并显示初始div

我有一组链接：

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

请注意，在html中标记为“initial”的类，我希望它在默认情况下在页面加载时显示-然后它也可以在悬停在其他页面上时隐藏

---

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

下面是我要做的：

$(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();
   }

});

HTML 关于ready函数的jQuery 请注意，我将

initial

类移动到了div。css选择器将任何div与class

floorplan details

中没有class

initial

的div相匹配。这似乎是一种在页面加载时显示初始布局图的更优雅的方式

---

jsFIDLE:

以下是我要做的：

$(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();
   }

});

HTML 关于ready函数的jQuery 请注意，我将

initial

类移动到了div。css选择器将任何div与class

floorplan details

中没有class

initial

的div相匹配。这似乎是一种在页面加载时显示初始布局图的更优雅的方式

---

jsFiddle:

我将稍微简化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>

---

trigger（）

方法允许您模拟事件并重用已为链接设置的逻辑。

我将稍微简化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>

---

trigger（）

方法允许您模拟一个事件并重用已为链接设置的逻辑。

虽然我会稍微改变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();
   }

});

---

虽然我会稍微改变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();
   }

});

---

谢谢你这样做，并张贴了小提琴甚至！它看起来不错。谢谢你这样做，并张贴了小提琴甚至！看起来不错。

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

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

$(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();
   }

});