将多个 javascript 元素与数据属性连接在一起（包括 JSFiddle）答案

【问题标题】：Connecting multiple javascript elements together with data-attributes (JSFiddle included)将多个 javascript 元素与数据属性连接在一起（包括 JSFiddle）
【发布时间】：2017-11-15 02:49:42
【问题描述】：

我有一个 javascript 函数，当我在页面上只有一个元素但有多个项目时我不知道如何将每个项目与其对应的图像配对。

在这个 JSFiddle 中，列出了我目前拥有的内容。当您将鼠标悬停在“链接 3”上时，它的行为正常，当鼠标悬停在链接上时，图像应该出现在鼠标下方。但是当我将鼠标悬停在其他链接上时，他们不知道要显示哪个项目。

我可以将独特的 slug 传递给链接中的任何项目。有谁知道正确连接每个项目的最佳方法？

https://jsfiddle.net/xw2Lvvj7/

var $img = $('.image');
$img.hide();
$('.hidden-overlay').mousemove(function(e) {
  $img.stop(1, 1).fadeIn();
  $('.image').offset({
    top: e.pageY - ($img.outerHeight() / 2),
    left: e.pageX - ($img.outerWidth() / 2)
  });
}).mouseleave(function() {
  $img.fadeOut();
});

body {
  padding: 90px;
}

.link {
  background: red;
  position: relative;
  z-index: 1;
}

.image {
  background-size: cover;
  height: 90px;
  width: 90px;
  position: absolute;
  z-index: 2;
}

.hidden-overlay {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 3
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <a class="link" data-slug="1">
        link 1
        <div class="image" style="background-image: url('http://via.placeholder.com/350x150');" data-slug="1"></div>
        <div class="hidden-overlay" data-slug="1"></div>
      </a>
  <br>
  <br>
  <br>
  <br>
  <a class="link" data-slug="2">
        link 2
        <div class="image" style="background-image: url('http://via.placeholder.com/450x450');" data-slug="2"></div>
        <div class="hidden-overlay" data-slug="2"></div>
      </a>
  <br>
  <br>
  <br>
  <br>
  <a class="link" data-slug="3">
        link 3
        <div class="image" style="background-image: url('http://via.placeholder.com/100x100');" data-slug="3"></div>
        <div class="hidden-overlay" data-slug="3"></div>
      </a>
</body>

【问题讨论】：

标签： javascript jquery

【解决方案1】：

你可以找到他们每个 .image 班级的父母，如下所示：

var $img = $('.image');
$img.hide();
$('.hidden-overlay').mousemove(function(e) {

  // Find the [.image] classes inside the [.link] parent classes for every .hidden-overlay 
  var oImageHover = $(this).parents('.link').find('.image'); 
  oImageHover.stop(1, 1).fadeIn();
  oImageHover.offset({
    top: e.pageY - (oImageHover.outerHeight() / 2),
    left: e.pageX - (oImageHover.outerWidth() / 2)
  });
}).mouseleave(function() {
  // The same thing as well when the element was out of focus
  var oImageLeave = $(this).parents('.link').find('.image');
  oImageLeave.fadeOut();
});

body {
  padding: 90px;
}

.link {
  background: red;
  position: relative;
  z-index: 1;
}

.image {
  background-size: cover;
  height: 90px;
  width: 90px;
  position: absolute;
  z-index: 2;
}

.hidden-overlay {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 3
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <a class="link" data-slug="1">
    link 1
    <div class="image" style="background-image: url('http://via.placeholder.com/350x150');" data-slug="1"></div>
    <div class="hidden-overlay" data-slug="1"></div>
  </a>
  <br>
  <br>
  <br>
  <br>
  <a class="link" data-slug="2">
    link 2
    <div class="image" style="background-image: url('http://via.placeholder.com/450x450');" data-slug="2"></div>
    <div class="hidden-overlay" data-slug="2"></div>
  </a>
  <br>
  <br>
  <br>
  <br>
  <a class="link" data-slug="3">
    link 3
    <div class="image" style="background-image: url('http://via.placeholder.com/100x100');" data-slug="3"></div>
    <div class="hidden-overlay" data-slug="3"></div>
  </a>

  <body>

希望这对您的情况有所帮助

【讨论】：