jQuery-單擊添加/刪除類-多個按鈕

Question

由於某種原因，當我添加第二個單擊功能時，它將完全停止工作。 我想知道是否有人可以幫助指出問題所在？

我正在嘗試做的是：

默認狀態為“白天”，單擊“夜晚”時，它將刪除白天班級並添加夜晚班級。 哪個會改變背景圖像。 哪個可行... 但是，當我添加白天按鈕的功能以添加白天班級和刪除夜晚班級時，會中斷並且不起作用。

這是我所擁有的東西： 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元素，因此，#room最終還附加了事件處理程序。 這使得即使單擊了夜晚，也總是將Day選擇為元素的類。

您應該考慮將類名稱更改為daycolor和nightcolor

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

和

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

Answer 2

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

演示版

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

在腳本中，您引用“ .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/

Answer 5

您可以添加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

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/