Менять цвет фона по клику по ссылке
Нужно чтоб по первому клику по ссылке фон менялся на красный, а по второму - на белый и так далее. Вот код:
<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> На первый клик фон меняется на красный, а второй клик уже не отрабатывает и фон остаётся красным. В чём может быть причина? |
Когда вы вешаете событие для красного, такого элемента еще не существует, поэтому и не работает.
|
Спасибо за ответ. Ведь знал же про 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'); }) |
Не понимаю, для чего менять класс ссылке, а 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. |