Вот такая простенькая страничка (выжимка проблемы)
Идея - по клику мышки выделять или снимать выделение
|
Код:
|
<style type="text/css">
.unsel {
background-color: #ffffff;
cursor: pointer;
}
.sel {
background-color: #9999ff;
cursor: pointer;
}
</style>
<script>
$(document).ready(function() {
/*
$(".It").click( function() { // (1) Так работает
if ($(this).is('.sel'))
$(this).removeClass('sel').addClass('unsel');
else
$(this).removeClass('unsel').addClass('sel');
});
*/
$(".sel").click( function() { // (2) Так валяет дурака
alert("sel");
$(this).removeClass('sel').addClass('unsel');
});
$(".unsel").click( function() {
alert("unsel");
$(this).removeClass('unsel').addClass('sel');
});
});
</script>
</head>
<body>
<span class='sel It'> Солнце </span><br>
<span class='unsel It'> Луна </span><br>
<span class='unsel It'> Меркурий</span><br>
</body> </html> |
В варианте (1) все прекрасно работает.
Но почему не работает в варианте (2)??? Точнее, работает - однократно.
Клик на Солнце снимает выделение. И инспектор показывает, что класс стал
unsel. Но повторный клик - и элемент ведет себя как
sel. Это и alert подтверждает. Аналогично ведут себя и другие элементы.
В чем может быть дело? Чего я очень глубоко не понимаю?
ЗЫ. Есть еще вариант с toggleClass. Тоже работает на ура!
Но вопрос -
чего же я не понимаю? продолжает мучить...
