JQuery - нажмите "Добавить/удалить класс" - несколько кнопок

По какой-то причине, когда я добавляю вторую функцию щелчка, она перестает работать полностью. Мне было интересно, сможет ли кто-нибудь помочь указать, что может быть проблемой?

То, что я пытаюсь сделать:

Состояние по умолчанию - "день", и когда нажата "ночь", он удаляет класс дня и добавляет ночной класс. Что изменяет фоновое изображение. Что работает... Сортировка. Однако, когда я добавляю функцию для кнопки дня, чтобы добавить класс дня, а удалить ночной класс - это перерывы и не работает.

Вот сценарий того, что у меня есть:http://jsfiddle.net/790hqykq/3/

$(document).ready(function () {

 $('.night').click(function () {
 $('#room').addClass('night');
 $('#room').removeClass('day');
 });

 $('.day').click(function () {
 $('#room').addClass('day');
 $('#room').removeClass('night');
 });

});

Благодарю!!

Изменить: Также - Есть ли способ угасать это изменение класса? Похоже на fadeIn/fadeOut? Благодарю!

6 ответов

jsFiddle Demo

Проблема с вашей скрипкой в том, что элемент #room имеет день класса. Так же и элемент привязки. Когда обработчик события настроен

$('.day').click(function () {

Он также присваивается элементу комнаты, и в результате этого #room заканчивается также с прикрепленным к нему обработчиком событий. Это приводит к тому, что день всегда выбирается как класс элемента, даже когда нажимается ночь.

Вы должны подумать о том, чтобы изменить имя класса на что-то вроде daycolor и nightcolor

<div id="room"> <p> а также</p> <pre class="prettyprint linenums">#room.daycolor {
 background: #00CCFF;
}


Элемент с ID- room имеет day класса, как один из элементов внутри него. Когда вы прикрепляете обработчик, он прикрепляется к обоим элементам.

Это должно решить вашу проблему:

$(document).ready(function () {
 $('.timeButton.day').click(function () {
 $('#room').addClass('day').removeClass('night');
 });

 $('.timeButton.night').click(function () {
 $('#room').addClass('night').removeClass('day');
 });
});

В соответствии с вашим дополнением к выцветанию вы можете использовать CSS 3 для достижения этого:

#room {
 -webkit-transition: background 0.5s linear;
 -moz-transition: background 0.5s linear;
 -ms-transition: background 0.5s linear;
 -o-transition: background 0.5s linear;
 transition: background 0.5s linear;
}

демонстрация


Вот еще одно решение, в котором я просто изменяю CSS-стиль через jquery.

Javascript:

$(document).ready(function () {
 $('.day').click(function () {
 $('#room').css("background-color", "#00CCFF");
 });

 $('.night').click(function () {
 $('#room').css("background-color", "#0000CC");
 });
});

Также вам нужно добавить фоновый цвет в #room:

background: #00CCFF;

Сценарий: http://jsfiddle.net/790hqykq/7/


вы можете добавить css3 для переходов изо дня в день. он не будет работать в старых браузерах IE 9 и ниже, но отлично подходит для всех современных браузеров. поддержка браузера. Вы можете использовать этот генератор, чтобы сделать код быстрее.

#room {
 width: 300px;
 height: 200px;
 position: relative;
 -webkit-transition: background 1000ms ease-in-out;
-moz-transition: background 1000ms ease-in-out;
-ms-transition: background 1000ms ease-in-out;
-o-transition: background 1000ms ease-in-out;
transition: background 1000ms ease-in-out;
 }

Демо-версия jsfiddle


В вашем скрипте вы ссылаетесь на ".night" вместо ".nightButton".

$('.nightButton').click(function () {
 $('#room').addClass('night');
 $('#room').removeClass('day');
});

$('.dayButton').click(function () {
 $('#room').addClass('day');
 $('#room').removeClass('night');
});

Чтобы добиться перехода, вы можете добавить это свойство CSS в #room.

-webkit-transition: background 2s; /* For Safari 3.1 to 6.0 */
transition: background 2s;

http://jsfiddle.net/790hqykq/13/


Измените имена классов на дочерние элементы и используйте этот селектор для своих событий.

jsFiddle

HTML:

<div id="container">
 <div id="room"> 
 Day
 Night
 </div>
</div>

JS:

$(document).ready(function () {

 $('.night1').click(function () {
 $('#room').addClass('night');
 $('#room').removeClass('day');
 });

 $('.day1').click(function () {
 $('#room').addClass('day');
 $('#room').removeClass('night');
 });


});

Стиль:

#container {
 width: 300px;
 margin: 0 auto;
}
#container a, #container div {
 float: left;
 display: block;
}
#room {
 width: 300px;
 height: 200px;
 position: relative;
}
#room.day {
 background: #00CCFF;
}
#room.night {
 background: #0000CC;
}
#room .day1 {
 left: 30px;
 border: 1px solid black;
}
#room .night1 {
 right: 30px;
 border: 1px solid black;
}
#room .timeButton {
 position: absolute;
 width: 80px;
 height: 25px;
 top: 30px;
 cursor: pointer;
 text-align: center;
}
#room .timeButton:hover {
 background: #fff;
}

licensed under cc by-sa 3.0 with attribution.