Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Менять цвет фона по клику по ссылке (https://javascript.ru/forum/jquery/17311-menyat-cvet-fona-po-kliku-po-ssylke.html)

Djeman 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 14.05.2011 09:32

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

Djeman 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 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>


Часовой пояс GMT +3, время: 00:40.