Смена класса по клику

[okunev2]

Как используя jquery для данного кода

<li class="red"><span></span></li>

По клику span, применять ему класс .activ, у которого свои стили будут.

 

Буду благодарен примеру.

[Zverushka]

$("span").click(function(){  $(this).addClass("activ");});

Ну и условие проверки желательно добавить - есть ли такой класс, если есть, то не добавлять еще один.

[swandev]

$("span").click(function(){  $(this).addClass("activ");});

Ну и условие проверки желательно добавить - есть ли такой класс, если есть, то не добавлять еще один.

 

$("span").click(function(){  $("span").removeClass("activ");  $(this).addClass("activ");});

Лучше так, мне кажется.

[npofopr]

а еще лучше toggleClass :-)

[antonKar]

 

$("span").click(function(){  $(this).addClass("activ");});

Ну и условие проверки желательно добавить - есть ли такой класс, если есть, то не добавлять еще один.

 

$("span").click(function(){  $("span").removeClass("activ");  $(this).addClass("activ");});

Лучше так, мне кажется.

 

$("span").click(function(){  $("span.activ").removeClass("activ");  $(this).addClass("activ");});

А ещё вот так

 

А ещё можно объявить глобальную переменную, при клике запихивать в неё $(this) и при последующем клике обращаться не к $("span.activ"), а к переменной.

 

И при этом можно будет сделать проверку: если объект в переменной совпадает с кликнутым элементом, то return false;

Edited December 7, 2013 by antonKar

[Zverushka]

$("span.activ").removeClass("activ");

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

[wwt]

 

$("span.activ").removeClass("activ");

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

 

Данным кодом он удаляет класс у всех элементов и добавляет тому на котором сработало событие. Может так и надо? Да и никаких глобальных переменных там нет вы видимо что-то другое хотели сказать.

Edited December 7, 2013 by wwt

[Zverushka]

А ещё можно объявить глобальную переменную, при клике запихивать в неё $(this) и при последующем клике обращаться не к $("span.activ"), а к переменной.

Я про это).

[wwt]

А ещё можно объявить глобальную переменную, при клике запихивать в неё $(this) и при последующем клике обращаться не к $("span.activ"), а к переменной.

Я про это).

 

А это, да, не хорошая практика.

[Николя223]

А ещё можно объявить глобальную переменную, при клике запихивать в неё $(this) и при последующем клике обращаться не к $("span.activ"), а к переменной.   И при этом можно будет сделать проверку: если объект в переменной совпадает с кликнутым элементом, то return false;

 

КПД маленькое, проще обычным IF отфильтровывать

 

 

 

а глобальные переменные - это вообще плохо. 

 

В этом случае да. А вообще - нет  

можно создать одну глобальную переменную как объект, а в его теле творить всё что пожелаете. Так практически любое API устроено

[Zverushka]

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

Edited December 7, 2013 by Zverushka

[Николя223]

я бы вообще в куках или сессиях хранил) перспективнее

Edited December 7, 2013 by Николя223

[antonKar]

 

$("span.activ").removeClass("activ");

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

 

Во-первых мы рассматриваем, как я понял, сферический случай в вакууме, где всё упрощено для наглядности.

Во-вторых, "глобальные переменные - это плохо" настолько мейнстривомо и настолько не доказуемо, что вызывает улыбку) Ну а если вас так пугают глобальные переменные, то оберните тогда всё дело в функцию, а функцию вызывайте при $(document).ready(). Всего проблем.

 

 

КПД маленькое, проще обычным IF отфильтровывать

Подробней можно в конце? Что значит "проще обычным IF" ? У меня как бы тоже проверка будет идти через IF.

[Zverushka]

настолько мейнстривомо и настолько не доказуемо,

Как же не доказуемо - там простой аргумент - переменная все время хранится в памяти, занимая лишний объем, также возможны проблемы с перезаписью (случайно) переменной, поэтому если это возможно и это удобно - рекомендуется все же по возможности делать переменные локальными.

[nerv]

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

можно через замыкание, можно через свойство функции (но при этом функция не должна быть анонимной), можно объект к событию прикрепить с помощью жуквери 

[okunev2]

$(".mat-spisok li").click(function(){  $("li.activ").removeClass("activ");  $(this).addClass("activ");});

					<div class="mat-spisok">						<ul>							<li><span>меню 1</span></li>							<li class="activ"><span>меню 2</span></li>							<li><span>меню 3</span></li>						</ul>					</div>

Здесь этот код применяет по клику стиля activ, а если кликать опять же на тоже место отменять примение activ?

При этом нужно если кликаем другой пункт меню, выделять его тоже, и не убирать стиль activ у предыдущего события клик?

я бы вообще в куках или сессиях хранил) перспективнее

 

как?

	$(" .mat-spisok li").click(function () {      	$(this).toggleClass("activ");      	return false;	});

Думаю так. Но к примеру будет ссылка очисить все, на неё какое собтиые вещать чтобы снять все activ стили?