JavaScript - 将函数应用于具有相同类名的div集合中的特定div

Question

当我悬停在.winner-container上时，JS函数会告诉.headline移出.winner-container，并告诉.bottom移入.winner-container。当我取消悬停时，相反的情况发生。

问题是，我将有数百个这些容器，所有容器都具有.winner-container类。所以我意识到，当我悬停在其中一个容器上时，该函数会同时应用于数百个不同的容器。我只想将该函数应用于我正在悬停的特定容器。我可以通过为每个容器分配一个id，然后为每个id编写新的JS代码来实现此目的，但考虑到将有数百个这些div，这将需要很多工作。是否有更优雅的解决方案？

https://jsfiddle.net/6sm6ajht/

HTML

<div class="winner-container">
  <div class="top">
    <h4 class="headline">SME Example 1</h4>
  </div>
  <div class="bottom">
    <div class="winner-words">
      <h6>SME Examle 1 is a technology company.</h6>
      <h6><a>Learn more...</a></h6>
    </div>
  </div>
</div>

<div class="winner-container">
  <div class="top">
    <h4 class="headline">SME Example 2</h4>
  </div>
  <div class="bottom">
    <div class="winner-words">
      <h6>SME Examle 2 is an e-commerce company.</h6>
      <h6><a>Learn more...</a></h6>
    </div>
  </div>
</div>

CSS

.winner-container {
  position: relative;
  box-shadow: 0px 2.5px 1px 0px rgba(0, 0, 0, 0.25);
  border: 1px solid #074E68;
}

.winner-container,
.top,
.bottom {
  width: 10em;
  height: 12em;
  overflow: hidden;
}

.bottom {
  position: absolute;
  height: 12em;
  width: 100%;
  top: 12em;
  transition: 0.5s ease-in-out;
}

.top .headline {
  position: absolute;
  top: 2.5em;
  width: 100%;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0px 1px 1px 2px rgba(0, 0, 0, 0.1);
  transition: 0.5s ease-in-out;
}

.top-up .headline {
  top: -2.5em;
}

.bottom-up.bottom {
  top: 0em;
  background-color: rgba(0, 0, 0, 0.65);
}

JavaScript

$(".winner-container").on("mouseenter", function() {
  $(".top").addClass('top-up');
  $(".bottom").addClass('bottom-up');
});

$(".winner-container").on("mouseleave", function() {
  $(".top").removeClass('top-up');
  $(".bottom").removeClass('bottom-up');
});

- Data

---

你应该为需要单独管理的标签添加一个id。 - ScaisEdge

Answer 1

对于选择器$(this)来说，这是一个很好的机会。因为有许多相同的元素，但你只想让每个事件处理程序引用该特定元素，所以你可以使用$(this)并使用相对选择器（如.children）来针对this元素相对于其他元素进行定位。

JSfiddle

$(".winner-container").on("mouseenter", function() {
  $(this).children(".top").addClass('top-up');
  $(this).children(".bottom").addClass('bottom-up');
});

$(".winner-container").on("mouseleave", function() {
  $(this).children(".top").removeClass('top-up');
  $(this).children(".bottom").removeClass('bottom-up');
});

- glhrmv

Answer 2

将选择器.top和.bottom更改为$(this).find('.top')和$(this).find('.bottom')。

在事件处理程序的上下文中，this是发生事件的元素。

- Quagaar

Answer 3

你可以尝试使用$(this)选择器来指定只希望当前元素成为指令作用域的范围。

$(".winner-container").on("mouseenter", function() {
  $(this).children(".top").addClass('top-up');
  $(this).children(".bottom").addClass('bottom-up');
});

$(".winner-container").on("mouseleave", function() {
  $(this).children(".top").removeClass('top-up');
  $(this).children(".bottom").removeClass('bottom-up');
});

- Maxime G

---

因为你的回答只是dogui的复制，所以被踩了。 - Quagaar

我没有看过这个人的回答，否则我根本不会有兴趣回答。我们同时发布了我们的答案。这会教会我帮助别人的做法。 - Maxime G

Answer 4

$(".winner-container") 会选中所有 class 为 winner-container 的元素，并为每个元素添加事件，这就是为什么你有两个元素但只需要定义一次的原因。

与 $('.top') 相同，这将选中所有名为 top 的类，你需要在事件内部使用 $(this).find('.top') 来仅选中当前元素并使用 find() 在此元素内搜索，查找 top 和 bottom 添加或删除类，做任何你想做的事情。

$(".winner-container").on("mouseenter", function() {
  $(this).find('.top').addClass('top-up');
  $(this).find('.bottom').addClass('bottom-up');
});

$(".winner-container").on("mouseleave", function() {
  $(this).find('.top').removeClass('top-up');
  $(this).find('.bottom').removeClass('bottom-up');
});

.winner-container {
  position: relative;
  box-shadow: 0px 2.5px 1px 0px rgba(0, 0, 0, 0.25);
  border: 1px solid #074E68;
}

.winner-container,
.top,
.bottom {
  width: 10em;
  height: 12em;
  overflow: hidden;
}

.bottom {
  position: absolute;
  height: 12em;
  width: 100%;
  top: 12em;
  transition: 0.5s ease-in-out;
}

.top .headline {
  position: absolute;
  top: 2.5em;
  width: 100%;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0px 1px 1px 2px rgba(0, 0, 0, 0.1);
  transition: 0.5s ease-in-out;
}

.top-up .headline {
  top: -2.5em;
}

.bottom-up.bottom {
  top: 0em;
  background-color: rgba(0, 0, 0, 0.65);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="winner-container">
  <div class="top">
    <h4 class="headline">SME Example 1</h4>
  </div>
  <div class="bottom">
    <div class="winner-words">
      <h6>SME Examle 1 is a technology company.</h6>
      <h6><a>Learn more...</a></h6>
    </div>
  </div>
</div>

<div class="winner-container">
  <div class="top">
    <h4 class="headline">SME Example 2</h4>
  </div>
  <div class="bottom">
    <div class="winner-words">
      <h6>SME Examle 2 is an e-commerce company.</h6>
      <h6><a>Learn more...</a></h6>
    </div>
  </div>
</div>

- Dalin Huang