Назначить класс другому элементу по клику - Web-Global: Связывая миры через веб-технологии
Web-Global

Назначить класс другому элементу по клику

Пост опубликован 22 февраля 2022 в 10:56 и находится в рубриках Jquery. 368
Поделиться:

Очень долго меня мучал вопрос, как сделать следующее: я нажимаю на кнопку и что-нибудь на странице происходит. Например красный квадрат окрашивается в синий цвет. А потом опять нажимаю на эту же кнопку и квадрат опять становится красным? Другими словами как по клику на 1 элементе поменять класс другому? Я люблю css, поэтому все стилевые изменения элементов провожу именно в нем. Ну что? Сделаем?

Для начала надо определиться что будет происходить. Мы создаем квадрат, присваиваем ему класс. Потом создаем кнопку. При нажатии на кнопку — квадрату будет присваиваться второй класс, при повторном нажатии — удаляться. Все вроде бы легко.

Создадим элементы:

<div class="square-red"></div>
<a class="button" href="">Окрасить квадрат</a>

Теперь запишем для них стили, предварительно учтем наш будущий класс square-blue — который и будет окрашивать наш квадрат.

.square-red {
	width:200px;
	height:200px;
	background-color:red;
	margin:50px;
}
.square-blue {
	background-color:blue;
}
.button {
	border-radius:10px;
	background-color:green;
	padding:10px;
}

Теперь наш скрипт, который все это оживит:

$(document).ready(function(){
	$(".button").click(function(){
		$(".square-red").toggleClass("square-blue"); return false;
	});
});

Не забываем подключить библиотеку JQuery — иначе ничего работать не будет.

Наш скрипт делает следующее: при нажатии на кнопку «Окрасить квадрат» с классом button, квадрату с классом square-red присваивается второй класс square-blue. Так как стиль для square-blue стоит ниже, чем square-red, то он приоритетней, поэтому при наличии двух классов — квадрат окрашивается в синий цвет. При повторном нажатии на кнопку «Окрасить квадрат» — второй класс square-blue убирается и квадрат снова становится красным. Вот и все=)

Посмотреть