javascript - jQuery 菜单 .hover() 影响 Dom/simplify 中远处的东西

Question

我正在尝试让一组特定于页面的图标在每个对应的菜单项悬停时淡入。我找到了很少的方法来做到这一点，但我并不太为它们感到骄傲。

用简单的英语来说，你在一个页面上，所以“我们”——默认情况下它有它的页面图标——所以，让我们说一类——菜单项上的 .current-page——和 .active-page - 当前页面图标 img 上的图标。 “当菜单项悬停时，假设它不是当前页面的菜单项，同时淡出当前图像并淡入与悬停的菜单项关联的图像。鼠标移开时，淡出该图像并淡入默认图像。”

关于如何使此功能更小和更模块化的任何建议？我不习惯处理 DOM 中相距甚远的事物，我通常只使用 CSS 来处理此类事物。我是否应该使用一些数据属性将这些菜单项与其图像相关联？

这是代码的核心部分。出于示例目的，我对其进行了简化。

HTML

<div class="container splash">
  <div class="inner-w">

    <ul class="menu">
      <li><a href="#" id="us-hover" class="current-page">Us</a></li>
      <li><a href="#" id="work-hover">Work</a></li>
      <li><a href="#" id="books-hover">Books</a></li>
    </ul>

  </div>
</div>

<div class="page-icon">
  random place far away in the DOM
   <div class="image-w">

    <img class="us-image active-page-icon" src="http://placehold.it/400x400&text=Us" alt="" />
    <img class="work-image hide" src="http://placehold.it/400x400&text=Work" alt="" />
    <img class="books-image hide" src="http://placehold.it/400x400&text=Books" alt="" />

  </div>
</div>

CSS

.hide {
  opacity: 0;
}

jQuery

$("#us-hover").hover(
  function() {
    $(".active-page-icon").addClass("hide"),
    $(".us-image").removeClass("hide");
  }, function() {
    $(".us-image").addClass("hide");
    $(".active-page-icon").removeClass("hide");
  }
);

$("#work-hover").hover(
  function() {
    $(".active-page-icon").addClass("hide"),
    $(".work-image").removeClass("hide");
  }, function() {
    $(".work-image").addClass("hide");
    $(".active-page-icon").removeClass("hide");
  }
);

$("#books-hover").hover(
  function() {
    $(".active-page-icon").addClass("hide"),
    $(".books-image").removeClass("hide");
  }, function() {
    $(".books-image").addClass("hide");
    $(".active-page-icon").removeClass("hide");
  }
);

这*有效...但是如果有 100 个项目或其他东西怎么办。我觉得有一种 super 巧妙的方法可以做到这一点。请赐教。最好的方法是什么？另外，.hover() 很酷吗？我看到很多悬停样式 - 没有真正的证据表明我应该使用 .on() ？

感谢您的宝贵时间。

哦，这是一个PEN

Answer 1

您可以将需要显示的内容与 anchor 一起存储在data-*自定义属性中

HTML

<ul class="menu">
  <li><a href="#" id="us-hover" data-display-item='.us-image' >Us</a></li>
  <li><a href="#" id="work-hover" data-display-item='.work-image' >Work</a></li>
  <li><a href="#" id="books-hover" data-display-item='.books-image' >Books</a></li>
</ul>

jQuery

$("#menu li a").hover(function() {
    $(".active-page-icon").addClass("hide"),
    $($(this).data('display-item')).removeClass("hide");
}, function() {
    $($(this).data('display-item')).addClass("hide");
    $(".active-page-icon").removeClass("hide");
});