Что не так с JQ кодом?

176

25 октября 2018, 16:10

$(document).ready(function() {
    $('.articles--buttonsFilter-left').on(click, function(){
        $(this).addClass('articles--buttonsFilter-chosen');
$('.articles--buttonsFilter-right').removeClass('articles--buttonsFilter-chosen');
    });
    $('.articles--buttonsFilter-right').on(click, function(){
        $(this).addClass('articles--buttonsFilter-chosen');
$('.articles--buttonsFilter-left').removeClass('articles--buttonsFilter-chosen');
    });
});

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

Answer 1

Поменяй в обработчиках событий click на 'click'. Первый параметр в функции 'on' должен быть типа String(Doc), а ты в данном случае просто как будто передаешь туда переменную, и скорее всего ее значение равно undefined, если ты раньше эту переменную не определил.

$(document).ready(function() { 
    $('.articles--buttonsFilter-left').on('click', function(){ 
 
        $(this).addClass('articles--buttonsFilter-chosen'); 
$('.articles--buttonsFilter-right').removeClass('articles--buttonsFilter-chosen'); 
 
    }); 
 
    $('.articles--buttonsFilter-right').on('click', function(){ 
 
        $(this).addClass('articles--buttonsFilter-chosen'); 
$('.articles--buttonsFilter-left').removeClass('articles--buttonsFilter-chosen'); 
 
    }); 
});

.articles--buttonsFilter-chosen { 
  background-color: red; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<button class='articles--buttonsFilter-left'>Left</button> 
<button class='articles--buttonsFilter-right'>Right</button>