Question

我有一个href按钮，我需要隐藏，具体取决于一天中的时间或更改背景颜色，如下所示：

<a class="button not-active " href="updateScheduleRequest.php?slotid=4&amp;timeremain=120&amp;current_date=2015-08-28&amp;empnum=107">Assign Slot 4</a>

我的CSS配置为：

.button {
}
/* daytime  */
.day
{
    background-color:#e0d0b7 !important;
}
/* Sunset  */
.sunset
{
    background-color:#887f70 !important;
}
/* Nightime  */
.night
{
    display:hidden !important;
}

然后我的jQuery被打破以处理这样的时间，但它根本没有对按钮进行任何更改？我错过了什么？

// Change background depending on user's time
function applyclass()
{
var d = new Date();
var n = d.getHours();
if (n > 19)
// If time is 7PM or later apply night theme to 'body'
$('button').addClass('night');
else if (n > 16 && n < 19)
// If time is between 4PM – 7PM sunset theme to 'body'
$('button').addClass('sunset');
else
// Else use 'day' theme
$('button').addClass('day');
}
window.onload = applyclass;

Answer 1

您可以考虑使用switch语句而不是if / else if / else。它稍微整理了一下代码：

function applyclass() {
    var d = new Date();
    var n = d.getHours();
    switch(true) {
        case (n > 19) :
            buttonClass = 'night';
            break;
        case (n > 16 && n < 19) :
            buttonClass = 'sunset';
            break;
        default:
            buttonClass = 'day';
    }
    $('.button').addClass(buttonClass);
}

另外，考虑使用默认样式（例如＆＃39; day＆＃39;类中的那些样式）设置.button元素的样式，然后在必要时仅应用其他类来覆盖这些样式。它比为每个案例依赖修饰符类更简单。

希望这有帮助！

jQuery / CSS脚本根据时间更改按钮颜色

1 个答案: