Как мне расширить этот JavaScript, чтобы изменить класс двух элементов в одном клике?

Question

Вчера Cletus помог мне с этим действительно приятным кодом: какой объект javascript я ищу? нажмите кнопку - она ​​останется жирной до следующего нажатия?

Это берет класс моего ли и меняет класс. Работает отлично! Я хочу расширить это, чтобы оно также изменило класс в a в li. Как мне это сделать?

Пример:

<ul>
 <li class="old_class"><a class="old_class" ...>
 <li class="old_class"><a class="old_class" ...>
 <li class="old_class"><a class="old_class" ...>
</ul>

So when I click the first link it would become:

<ul>
 <li class="new_class"><a class="new_class" ...>
 <li class="old_class"><a class="old_class" ...>
 <li class="old_class"><a class="old_class" ...>
</ul>

Как и сейчас, код li меняется, но не a.

Код, который я использую:

$(".old_class").click(function() {
  $(".new_class").removeClass("new_class");
  $(this).addClass("new");
});

Спасибо! Я использую Jquery ...

Answer 1

Определить вас ul с class, скажем <ul class="nav">...

Тогда:

var navItems = $('.nav > li');
navItems.click (function () {
    navItems.children ('a').andSelf ()
        .removeClass ('new_class').addCass ('old_class');
    $(this).children ('a').andSelf ()
        .removeClass ('old_class').addClass ('new_class');
});

Тем не менее, вам не нужно никаких классов для детей a - вы можете ссылаться на них в CSS как на .new_class a

Answer 2

Попробуйте:

$(".old_class").click(function() {
  $(this).removeClass("old_class");
  $(this).children("a").removeClass("old_class");
  $(this).addClass("new_class");
  $(this).children("a").addClass("new_class");
});