javascript - jQuery - 单击添加/删除类 - 多个按钮

Question

出于某种原因，当我添加第二个点击功能时，它完全停止工作。我想知道是否有人可以帮助查明可能是什么问题？

我正在尝试做的事情:

默认状态是“白天”，当点击“夜晚”时，它会移除白天类并添加夜间类。这改变了背景图像。哪个有效...有点。但是，当我添加白天按钮的功能以添加白天类(class)并删除夜间类(class)时，它会中断并且不起作用。

这是我的 fiddle : 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');
    });

});

谢谢!!

编辑:另外 - 有什么方法可以淡化这个类变化吗？类似于淡入/淡出？谢谢!

Answer 1

jsFiddle Demo

您的 fiddle 的问题是#room 元素有上课日。 anchor 元素也是如此。设置事件处理程序时

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

它也被分配给房间元素，因此，#room 最终也附加了事件处理程序。这会导致始终选择白天作为元素的类，即使单击夜晚也是如此。

您应该考虑将类名更改为类似daycolor 和nightcolor

<div id="room" class="daycolor">

和

#room.daycolor {
 background: #00CCFF;
}