Как добавить условие в jQuery .hover ()

Question

Я хочу использовать функцию наведения jQuery и могу сделать это без проблем.

 $(".tag").hover(function() { $(this).addClass("tag-over"); }, function() { $(this).removeClass("tag-over"); });

Однако в некоторых случаях я уже добавил класс tag-over из-за события click, но я не хочу, чтобы он удалялся, когда пользователь удаляет мышь.

Как выполнить addClass () и rmeoveClass (), только если класс tag-over еще не присоединен к элементу.

Пожалуйста, дайте мне знать, если это объяснение бесполезно.

Answer 1

Вы действительно хотите иметь другой селектор для события click: tag-focus или что-то в этом роде. Таким образом, ваш элемент может иметь оба класса, и это не будет иметь значения, намного проще отслеживать.

Answer 2

Я думаю, что-то подобное должно сделать это:

$('.tag').hover(function() {
    var $this = $(this);

    if ($this.hasClass('tag-over')) {
        $this.data('tag-over-existed', true);
    } else {
        $this.addClass('tag-over');
    }
}, function() {
    var $this = $(this);

    if (!$this.data('tag-over-existed')) { // i.e. if we added the class ourselves
        $this.removeClass('tag-over');
    }

    $this.removeData('tag-over-existed');
});

Используется метод data для хранения информации о конкретном элементе.

Answer 3

Если я понимаю ваш вопрос, вы можете использовать : not () , что, я думаю, будет лучшим решением для этого.

$(".tag:not(.tag-over)").hover(function() { $(this).addClass("tag-over"); }, function() { $(this).removeClass("tag-over"); });

Answer 4

Не элегантное решение, хотя здесь .

Плохая вещь, это добавляет click класс для проверки.

$('.tag').hover(
    function (){
        $(this).addClass("tag-over"); 
    },
    function (){
        if(!$(this).hasClass('clicked')){
            $(this).removeClass("tag-over"); 
        }
    }
).click(function (){
            $(this).addClass('click');
        })

Answer 5

почему бы вам не попробовать добавить класс tagover для события щелчка и tag-over для события при наведении?

Надеюсь, это поможет