Как правильно использовать each () с указателями mouseenter, mouseover и data

Question

У меня есть блок, который имеет некоторые атрибуты данных:

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

Теперь я хочу использовать javascript для изменения цвета текста при наведении мыши и наведении курсора с использованием моих атрибутов данных. Итак, у меня есть:

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

Если у меня есть один div, он работает нормально, но если у меня есть еще один div с тем же классом, и я mouseenter и mouseover над одним div, другие div тоже реагируют. Что я должен сделать, чтобы это работало правильно, может быть, добавить индекс, я не знаю. Можете ли вы помочь мне, пожалуйста?

Заранее спасибо. Извините за мой английский.

PS Не советуйте css, для этого я должен использовать javascript.

Answer 1

Ваш код должен работать сам по себе, но вам не нужно циклически проходить через каждый 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 не нужен, но я добавил его, чтобы доказать, что он работает правильно.

Answer 2

Получить целевой элемент события, передаваемого в каждый обработчик, используя $(this):

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

.my-div{
  font-size: 20px;
  line-height: 25px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="my-div" data-color="black" data-hover="red">
    Text 1
</div>

<div class="my-div" data-color="black" data-hover="green">
    Text 2
</div>

<div class="my-div" data-color="black" data-hover="blue">
    Text 3
</div>