Последние несколько дней я работаю над проектом, сейчас в этом проекте у меня есть боковая панель с такими кнопками

<div class="btn">
   Button 1
</div>
<div class="btn">
   Button 2
</div>
<div class="btn">
   Button 3
</div>

Кроме того, у меня есть некоторый JavaScript для кода события mouseenter, как это

$(function).ready(function(){
    $('.btn').mouseenter(function(){
        $('.btn').css('color', 'red');   
    });
});

Теперь проблема в том, что этот код javascript меняет все элементы с одинаковым классом. Я не хочу этого Я хочу изменить только одну кнопку.

Например, если навести курсор на первую кнопку, код JavaScript должен изменить цвет только первой кнопки, а не других кнопок

По какой-то причине я не могу использовать CSS для этого случая

Так может ли кто-нибудь помочь мне решить эту проблему

1
Abhishek Chatterjee 27 Авг 2017 в 10:13

4 ответа

Лучший ответ

Вам нужно ссылаться на элемент конкретно с помощью $ (this), иначе все элементы с классом ".btn" изменятся:

$('.btn').mouseenter(function () {

    $(this).css('color', 'red');

});
3
RickL 27 Авг 2017 в 07:28
$(document).ready(function(){
$(".btn").mouseover(function(){
$(this).css('color','red')
});
$(".btn").mouseleave(function(){
$(this).css('color','#000000')
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn">
   Button 1
</div>
<div class="btn">
   Button 2
</div>
<div class="btn">
   Button 3
</div>
0
vicky patel 27 Авг 2017 в 12:21

Если вам нужно указать, какой элемент с тем же именем класса, вы можете использовать .eq(). $("div.btn") будет означать все <div> элементы с классом btn. Однако, если вы сделаете $("div.btn").eq(0), это будет означать первый <div> элемент с классом btn. Аналогично, .eq(1) для второго элемента и так далее.

0
Nicholas 27 Авг 2017 в 07:18

Так должно быть.

$(function).ready(function(){ $('.btn').mouseenter(function(){ $(this).css('color', 'red'); }); });
0
Naren Murali 27 Авг 2017 в 07:18