时间戳

首页 > 解决方案 > 如何将 each() 与 mouseenter、mouseover 和 data 属性一起使用

javascript - 如何将 each() 与 mouseenter、mouseover 和 data 属性一起使用

问题描述

我有一个具有一些数据属性的块：

<div class="my-div" data-color="#ff4b4b" data-hover="#000">
    Text
</div>

现在我想使用 javascript 使用我的数据属性更改 mouseenter 和 mouseover 上的文本颜色。所以我有：

$(".my-div").each(function() {
    $(this).mouseenter(function() {
        $(this).css('color', this.dataset.hover);
    });
    $(this).mouseleave(function() {
        $(this).css('color', this.dataset.color);
    });
});

如果我有一个 div，它工作正常，但如果我有另一个具有相同类的 div，并且我将鼠标输入和鼠标悬停在一个 div 上，另一个 div 也会做出反应。我应该怎么做才能使它正常工作，也许添加一个索引，我不知道。你能帮我吗？

提前致谢。对不起我的英语不好。

PS不要建议css，为此我必须使用javascript。

标签： javascriptjquery

解决方案

您的代码应该可以自己运行，但您不需要遍历每个 div 来检查鼠标是否进入或离开了每个div元素 - 这是非常低效的。

所以删除：

$(".my-div").each(function() {});

您的新代码应如下所示：

$(".my-div").mouseenter(function() {
  $(this).css('color', this.dataset.hover);
});
$(".my-div").mouseleave(function() {
  $(this).css('color', this.dataset.color);
});
.my-div {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 100px;
  color: #ff4b4b;
  border: 1px solid #000000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="my-div" data-color="#ff4b4b" data-hover="#000">
  Text
</div>
<div class="my-div" data-color="#ff4b4b" data-hover="#000">
  Text
</div>
<div class="my-div" data-color="#ff4b4b" data-hover="#000">
  Text
</div>

显然 CSS 不是必需的，但我添加了它以证明它可以正常工作。

推荐阅读