Форум

Djeman · #1 (**permalink**) 14.05.2011, 09:24

Нужно чтоб по первому клику по ссылке фон менялся на красный, а по второму - на белый и так далее. Вот код:

<body>

<a class="white" href="#">click</a>

<script type="text/javascript">
$(document).ready(function(){
	
	
	$('a.white').click(function(){
		$('body').css('background', 'red');
		$(this).removeClass();
		$(this).addClass('red');
	})

	$('a.red').click(function(){
		$('body').css('background', '#fff');
		$(this).removeClass();
		$(this).addClass('white');
	})
	

});
</script>
</body>

На первый клик фон меняется на красный, а второй клик уже не отрабатывает и фон остаётся красным. В чём может быть причина?

walik · #2 (**permalink**) 14.05.2011, 09:32

Когда вы вешаете событие для красного, такого элемента еще не существует, поэтому и не работает.

Djeman · #3 (**permalink**) 14.05.2011, 09:47

Спасибо за ответ. Ведь знал же про live)
Теперь всё работает:

$('a.white').live('click', function(){
		$('body').css('background', 'red');
		$(this).removeClass();
		$(this).addClass('red');
	})

	$('a.red').live('click', function(){
		$('body').css('background', '#fff');
		$(this).removeClass();
		$(this).addClass('white');
	})

subzey · #4 (**permalink**) 14.05.2011, 12:22

Не понимаю, для чего менять класс ссылке, а body инлайном цвет фона, если можно просто поменять класс body?

<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
			body {background: white}
			body.alternate-color {background: red}
			a.toggle-color {color: red}
			body.alternate-color a.toggle-color {color: white}
		</style>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
		<script type="text/javascript">
			$(".toggle-color").live("click", function(){
				$(document.body).toggleClass("alternate-color");
				return false;
			})
		</script>
	</head>
	<body>
		<div><a href="javascript://" class="toggle-color">Изменить цвет фона!</a></div>
		<p>Lorem ipsum dolor sit amet</p>
		<p>ETAOIN SHRDLU ETAOIN SHRDLU ETAOIN SHRDLU</p>
	</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript