Как остановить jQuery от сопоставления нескольких элементов

Question

Я пытаюсь создать эффект опрокидывания с помощью jquery. У меня схожие вещи, однако, поскольку я пытаюсь сделать mouseover с объектом, у которого есть ссылка, у меня возникают проблемы.

У меня есть навигационная панель уровня 2. Заполнитель - это ячейки таблицы (плохо знаю, но это уже сделано таким образом). Я хочу изменить фон от белого (#FFF) до темно-серого (# 999). Я также хочу изменить текст от темно-серого до белого.

Поскольку текст является ссылкой, я должен указать класс в теге ссылки, чтобы убедиться, что он темно-серый без подчеркивания и не имеет значения по умолчанию для синего подчеркнутого текста.

Код, который я написал, приводит к тому, что все ссылки класса = "subLink" заменяются на белые от серого, когда кто-либо из них «зависает». Я только хочу, чтобы это произошло для конкретного предмета, о котором идет речь, - то есть фон должен стать серым, а ссылка должна стать белой.

HTML и JQuery ниже: -

<td class="subMenuTD"><a href="newsletter.html" class="subLink">Newsletter</a></td> 
<td class="subMenuTD"><a href="news_archive.html" class="subLink">News Archive</a></td> 
<td class="subMenuTD"><a href="events.html">Events</a></td> 

---

$(".subMenuTD").hover(
        function() { 
        $(this).addClass("subMenuTDActive"); 
        $(".subLink").addClass("subLink-white"); 
        }, 
        function() {  
        $(this).removeClass("subMenuTDActive"); 
        $(".subLink").removeClass("subLink-white"); 
      } 
       ); 

Answer 1

Добавить параметр контекста для функции $().

$(".subLink") ->$(".subLink", this) сделает jQuery только совпадением «.subLink», которые являются дочерними элементами данного элемента контекста.

Answer 2

Вы можете сделать это еще проще, не добавляя класс по ссылке, так как вы уже добавления класса к родительскому тд, и таким образом, может предназначаться ссылку с помощью CSS:

кодекса перед тем

$(".subMenuTD").hover(      
    function() { 
    $(this).addClass("subMenuTDActive");         
    $(".subLink").addClass("subLink-white"); 
    }, 
    function() { 
    $(this).removeClass("subMenuTDActive");         
    $(".subLink").removeClass("subLink-white"); 
    } 
); 

Код после

$(".subMenuTD").hover(      
    function() { 
    $(this).addClass("subMenuTDActive");  
    }, 
    function() { 
    $(this).removeClass("subMenuTDActive");  
    } 
); 

Новый CSS править

.subMenuTDActive .subLink { 
    /* Add hover link styling here */ 
} 

Это будет работать, потому что ".subMenuTDActive .subLink" имеет более высокий, чем specitivity ".subLink", и таким образом переопределить ".subLink" правило.

Answer 3

Вы можете использовать решение AKX, либо: раствор

$(".subMenuTD").hover(
        function() { 
          $(this) 
           .addClass("subMenuTDActive") 
           .children(".subLink") 
           .addClass("subLink-white"); 
        }, 
        function() {    
          $(this) 
           .removeClass("subMenuTDActive"); 
           .children(".subLink") 
           .removeClass("subLink-white"); 
        } 
      ); 

Answer 4

AKX является правильным. В качестве альтернативы вы можете сделать:

$(this).children(".subLink") 

Answer 5

Я с drthomas. Почему вообще вы используете javascript вообще, когда можете просто использовать css?

.subMenuTD:hover { 
        background-color: #ccc; 
        } 

.subLink:hover { 
       color: #fff; 
       } 

Или еще лучше (мне думает), избавиться от укладки элементов TD, что вы не должны иметь и должны работать на удалении, установите ссылки в качестве дисплея: блок, а затем вы можете объявить парить стиль под одного элемента:

.subLink { 
      display: block; 
      } 

    .subLink:hover { 
       background-color: #ccc; 
       color: #fff; 
       } 

И если вы не имеете никакого контроля над HTML или у вас есть что-то критически важно, опирающийся на разметке остаются теми же самыми, что «это уже с помощью таблиц, я знаю, подать в суд на меня» это действительно плохое оправдание. Вот ваше подменю, без таблицы:

<ul class="subMenu"> 
<li><a href="newsletter.html">Newsletter</a></li> 
<li><a href="news_archive.html">News Archive</a></li> 
<li><a href="events.html">Events</a></li> 
</ul> 

Это заняло около 30 секунд. Теперь вот CSS для NavBar/опрокидывания:

.subMenu li { 
      display: inline; 
      list-style: none; 
      } 

    .subMenu a { 
      color: #000; 
      background-color: #fff; 
      text-decoration: none; 
      display: block; 
      } 

    .subMenu a:hover { 
      color: #fff; 
      background-color: #ccc; 
      } 

Это заняло, может быть минуты больше, потому что я должен был сделать это выглядеть красиво.

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