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

Очень долго меня мучал вопрос, как сделать следующее: я нажимаю на кнопку и что-нибудь на странице происходит. Например красный квадрат окрашивается в синий цвет. А потом опять нажимаю на эту же кнопку и квадрат опять становится красным? Другими словами как по клику на 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 - иначе ничего работать не будет.

И весь код напоследок:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"  type="text/javascript"></script>
<script>
$(document).ready(function(){
	$(".button").click(function(){
		$(".square-red").toggleClass("square-blue"); return false;
	});
});
</script>
</head>
<style>
.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;
}
</style>
<body>
<div class="square-red"></div>
<a class="button" href="">Окрасить квадрат</a>
</body>
</html>

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

04.04.17

Ссылка на статью:

https://webkab.ru/naznachit-klass-drugomu-elementu-po-kliku-jquery/