将多个 JavaScript 元素与数据属性连接在一起(包括 JSFiddle)

我有一个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>

你可以找到他们的每个.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>

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

相关内容

最新更新

热门标签：