Question

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

在这个JSFiddle中，我目前所拥有的是什么。当您将鼠标悬停在“链接3”上时，它表现正常，图像应该在鼠标悬停在链接上时显示在鼠标下方。但当我将鼠标悬停在其他链接上时，他们不知道哪个项目可见。

我可以将唯一的slugs传递给链接中的任何项目。有没有人知道正确连接每个项目的最佳方法？

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>

Answer 1

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

＆＃13;

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

＆＃13;

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
}

＆＃13;

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

＆＃13;

希望这有助于您的案例

将多个javascript元素与data-attributes连接在一起（包括JSFiddle）

1 个答案: