jquery выбрать все ссылки, кроме тех, которые имеют определенный класс

Question

Я ищу функцию для применения класса ко всем ссылкам, кроме одной, по которой щелкнули.

CSS

.foot_active {
    text-decoration:underline;
}
.foot_inactive {
    text-decoration:none;
}

HTML

<div class="sitemap">
    <table class="table_site">
        <tr>
            <td class="subsite"><a>op1</a></td>
            <td class="subsite"><a>op2</a></td>
            <td class="subsite"><a>op3</a></td>
        </tr>   
    </table>
</div>

Сценарий

$('a:contains("op1")')
    .live('click', function(){
        $(this).addClass('foot_active');
        $('a:not(.foot_active)').addClass('foot_inactive');
    });
$('a:contains("op2")')
    .live('click', function(){
        $(this).addClass('foot_active');
        $('a:not(.foot_active)').addClass('foot_inactive');
    });
$('a:contains("op3")')
    .live('click', function(){
        $(this).addClass('foot_active');
        $('a:not(.foot_active)').addClass('foot_inactive');
    });

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

Спасибо.

Answer 1

Вы никогда не удаляете какие-либо классы, поэтому в итоге все ссылки имеют неактивный класс.

Вам вообще не нужен неактивный класс, просто удалите активный класс. Это заменит три ваших обработчика событий:

$('a') .live('click', function(){
  $(this).addClass('foot_active');
  $('a').not(this).removeClass('foot_active');
});

Возможно, вы захотите использовать более конкретный селектор, чем 'a', например '.subsite a', если у вас есть больше ссылок на странице.

Answer 2

для всех ссылок внутри td с классом .sitemap вы можете попробовать:

$('.sitemap a') .live('click', function(){
  $(this).addClass('foot_active');
  $('.sitemap a').not(this).removeClass('foot_active');
});

Answer 3

Во-первых, вы не должны использовать .live(), поскольку это устарело в jQuery 1.7.

Надеюсь, это то, что вы ищете.

$('.sitemap a').click(function(){
  $('.sitemap a').toggleClass('foot_inactive',true).toggleClass('foot_active',false);
  $(this).addClass('foot_active');    
});

Answer 4

Вы не хотите менять все остальные элементы.Элемент может иметь много классов, поэтому вам нужно только переключить активный класс.

$('.table_site a').addClass('foot_inactive').click(function(){
    $('.foot_active').removeClass('foot_active');
    $(this).addClass('foot_active');    
})

Answer 5

Вы можете попробовать ...

$('a.foot_active').removeClass('foot_active').addClass('foot_inactive'); $(this).removeClass('foot_inactive').addClass('foot_active');

... это делает то, что вы хотите?