addClass() не работает в mouseenter()?

-1

У меня есть функция mouseenter, которая превращает выбранный div в красный цвет и 1 непрозрачность. У меня есть класс «полный», который делает именно это, но когда я добавляю этот класс внутри mouseenter, div не меняет цвет. Вместо этого, если я добавлю красный цвет и изменим непрозрачность внутри mouseenter с помощью this.style.color и this.style.opacity, то, похоже, это сработает. Почему мой вопрос?addClass() не работает в mouseenter()?

JQuery (НЕ РАБОТАЕТ):

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

    $(".content").each(function (i) { 
     if (this.style.color != "#F7F7F7") { 
      this.style.color = "#F7F7F7"; 
      this.style.opacity = "0.5"; 
     } 
    }); 

    this.addClass('full'); 

});

JQuery (РАБОТА):

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

    $(".content").each(function (i) { 
     if (this.style.color != "#F7F7F7") { 
      this.style.color = "#F7F7F7"; 
      this.style.opacity = "0.5"; 
     } 
    }); 

    this.style.color = "red"; 
    this.style.opacity = "1"; 

});

CSS:

.full 
{ 
color: red; 
opacity: 1; 
}

источник

2013-07-16 user2441391

this не коллекция JQuery в callba ck до метода mouseenter. Вам нужно использовать $(this).

источник

2013-07-16 16:17:31

Да, вы правы. Не могли бы вы объяснить разницу между 'this' и' $ (this) '? – user2441391

'this' относится к элементу DOM,' $ (this) '- элемент DOM, завернутый в объект jquery, добавив к нему jquery-методы. 'addClass()' - это метод jquery, поэтому вам нужно использовать объект jquery. –

'this' означает (в данном случае) узел DOM. '$ (this)' возвращает объект JQuery на основе узла, на который ссылается 'this'. Объект jquery имеет все методы, к которым имеет доступ функция $. У нормального узла dom нет. –

this следует использовать как jQuery(this).

Использование:

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

    $(".content").each(function (i) { 
    if (this.style.color != "#F7F7F7") { 
     this.style.color = "#F7F7F7"; 
     this.style.opacity = "0.5"; 
    } 
    }); 

    jQuery(this).addClass('full'); 

});

источник

2013-07-16 16:18:46

Есть несколько проблем; один заключается в том, что this не является объектом jQuery в обработчике. Другой заключается в том, что ваши правила style всегда будут иметь приоритет над классом *. Я не знаю, что контекст, но кажется, что вы должны делать их все, что цвет по умолчанию и добавлением и удалением класса:

var $content = $('.content'); 

$content.mouseenter(function() { 
    $content.removeClass('full'); 
    $(this).addClass('full'); 
});

Хотя что делает его выглядеть ваш CSS должны быть меньше .full и более :hover, без JavaScript вообще. (И это лучший вид JavaScript.)

^{* Без !important, который вы никогда не должны использовать.}

источник

2013-07-16 16:19:25 Ryan

Вы устанавливаете встроенные стили с помощью javascript. Они всегда будут отменять стили классов.

источник

2013-07-16 17:00:50 MiRaIT

addClass() не работает в mouseenter()?

ответ

Смежные вопросы