Селектор элементов списка без элемента с определенным классом

0

У меня есть следующий список

<ul id='myList'>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li class='item-selected'>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
</ul>

Я хочу добавить item-over класса item-over mouseenter и хочу удалить item-over класса item-over

mouseleave без элемента, который имеет item-selected класса

я пытался

$('#myList li:not(".item-selected")')
    .mouseenter(function(){ 
         $(this).addClass('item-over'); 
    })
    .mouseleave(function() {
         $(this).removeClass('item-over'); 
    });

Но неспособен.

Как это можно сделать?

  • 1
    :hover в css не работает?
  • 3
    Ваш код отлично работает в скрипке: jsfiddle.net/RoryMcCrossan/uLYXf . Проблема может заключаться в другом месте вашего кода, возможно, в CSS для .item-over .
Показать ещё 2 комментария
Теги:

5 ответов

0

Это работает

$('#myList li:not(".item-selected")')
    .mouseenter(function(){ 
         if(!$(this).hasClass("item-selected")) //added this line
             $(this).addClass('item-over'); 
    })
    .mouseleave(function() {
         $(this).removeClass('item-over'); 
    });
Поделиться
0

На самом деле для этого вам не нужен JavaScript.

#myList li {
    &:hover {
        color: blue;
    }

    &.item-selected,
    &.item-selected:hover {
        color: red;
    }
}

http://jsfiddle.net/f0t0n/xGqeE/

или для IE> = 8

#myList li {
    &:hover:not(.item-selected) {
        color: blue;
    }

    &.item-selected {
        color: red;
    }
}

http://jsfiddle.net/f0t0n/LBULM/

Поделиться
  • 0
    Спасибо, хороший ответ, я попробую это, но нашел с помощью jquery, я сделал это как stackoverflow.com/a/19492779/2459296
0

Что, кажется, вы пропустили doc ready обработчик для этого, попытайтесь поместить его в документ, готовый блок:

$(function(){
    $('#myList li:not(".item-selected")').mouseenter(function(){ 
        $(this).addClass('item-over'); 
    }).mouseleave(function() {
        $(this).removeClass('item-over'); 
    });
});
Поделиться
  • 0
    Спасибо, ваш ответ должен работать, но не работает в моих больших скриптах и динамически создаваемом списке. Я сделал это как stackoverflow.com/a/19492779/2459296
  • 0
    Вы должны были упомянуть об этом ранее (динамически создаваемый).
0

кажется, что ваш код в порядке, на стороне события.

посмотрите на http://jsfiddle.net/F8rxJ/

это код:

$(document).ready(function () {
    $('#myList li:not(".item-selected")').bind('click',function(){
        alert('xxx');            
    });

});

он показывает, что событие работает.

попробуйте использовать "зависание" на вашей реальной работе, которую вы пытаетесь сделать.

Поделиться
  • 0
    Спасибо, ваш ответ должен работать, но не работает в моих больших скриптах и динамически создаваемом списке. Я сделал это как stackoverflow.com/a/19492779/2459296
0

Я бы использовал эту функцию, чтобы сделать это вдвойне уверенно, я бы также использовал hover чтобы сделать его более захватывающим и забавным:

$('#myList li').not( ".item-selected" ).hover(
     function(){ 
         $(this).addClass('item-over'); 
     },
     function() {
          $(this).removeClass('item-over'); 
     }
);
Поделиться
  • 0
    Спасибо, ваш ответ должен работать, но не работает в моих больших скриптах и динамически создаваемом списке. Я сделал это как stackoverflow.com/a/19492779/2459296

Ещё вопросы

Сообщество Overcoder
Наверх
Меню