Question

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

我想做的事情：

默认状态为＆＃34; day＆＃34;当＆＃34;晚上＆＃34;单击，它将删除日期类并添加夜班。这改变了背景图像。哪个有用......排序。但是，当我添加日期按钮的功能来添加日期类并删除夜班是休息时间并且不起作用。

这是我所拥有的一小部分： 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类似？谢谢！

Answer 1

<强> jsFiddle Demo

你的小提琴的问题是#room元素有课时。锚元素也是如此。设置事件处理程序时

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

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

您应该考虑将班级名称更改为daycolor和nightcolor

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

和

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

Answer 2

标识为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;
}

Demo

Answer 3

更改子元素的类名，并将该选择器用于事件。

jsFiddle

HTML：

<div id="container">
    <div id="room" class="day"> 
        <a class="timeButton day1">Day</a>
        <a class="timeButton night1">Night</a>
    </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;
}

Answer 4

在您的脚本中，您引用＆＃34; .night＆＃34;相反＆＃34; .nightButton＆＃34;。

$('.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/

Answer 5

您可以为白天到夜晚的过渡添加css3。它不适用于旧的IE浏览器9及以下，但在所有现代浏览器中都很出色。 browser support.您可以使用此generator来加快代码速度。

        #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;
    }

Demo jsfiddle

Answer 6

这是另一种解决方案，我只需通过jquery更改css样式。

使用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/

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

6 个答案: