Не улавливаю один момент в jQuery...

Question

Не улавливаю один момент в jQuery...

Elepsis Eclipse Гений (64069), закрыт 5 лет назад

Вот кнопки:

< button class="tab" > 1111 < /button >
< button class="tab" > 2222 < /button >
< button class="tab" > 3333 < /button >

Хочу добавить активный класс на кликнутую кнопку...

$(document).on('click','.tab',function(){
$('.tab').ramoveClass('active');
$(this).addClass('active');
});

Пишу так - (this).addClass не работает...
Меняю местами:

$(document).on('click','.tab',function(){
$(this).addClass('active');
$('.tab').ramoveClass('active');
});

Срабатывает только добавление класса, а со всех остальных классов не пропадает активный класс. В чем фишка?)

JsFiddle
__________

Просто интересно стало, на чистом JS написал по той же логике - всё работает (сначала удалить класс со всех найденных элементов, потом добавить его к текущему кликнутому элементу)

Answer 1

А кагбэ ничо что "ramoveClass"?))
rAmove
‎
У тебя просто весь скрипт падает о̶т̶ с̶м̶е̶х̶а̶ с исключением, когда встречает этот вызов.
Смотри в консоль почаще... при ошибках там и эксепшн тебе пишется, и стактрейс с кликабельными ссылками на код. Нашел бы причину буквально за 10 секунд.

Answer 2

$('.tab').ramoveClass('active');
Он наверное видит, что не везде active есть на tab, и не может убрать. Зачем выбирать табы если можно сразу обратиться к классу где актив есть, то есть к самому активу

$(document).on('click', function(event) {

//Если есть где то .active находим и удаляем его
if($('.active')!='undefined'){
$('.active').removeClass('active');
}

//Находим то по чему мы кликнули и потом до ближайшей button
var x =event.target.closest('button');

//Почему то jq не хочет, добавлю родным методом класс
x.classList.add("active");

});

Answer 3

Открой консоль браузера, он там тебе скажет, что метод ramoveClass отсутствует.
Научись пользоваться инструментами разработчика, это пригодится.

Answer 4

У тебя опечатка в коде. ramoveClass замени на removeClass

Answer 5

Андрей Западный Западный Профи (905) 5 лет назад

что-то похожее codepen.io/andrey-zapadny/pen/zXKrjb

Elepsis EclipseГений (64069) 5 лет назад

$(this).attr('data-fruit')

эквивалентно:

$(this).data('fruit')

Андрей Западный Западный Профи (905) я еще не селен в этом, но думал что дата атрибут стоит так записывать