Addclass的時間jQuery的

Question

期間，我有以下的HTML

<div id="btn_1">Button 1</div> 
<div id="btn_2">Button 1</div> 
<div id="btn_3">Button 1</div> 

我想添加一個CSS類的一段時間，例如：如果時間是06:59添加類00:00 「select」to id「btn_1」，在07:00至10:59之間將類添加到ID「btn_2」，最後在11:00至16:00將類添加到ID「btn_3」。

請幫忙嗎？

Answer 1

$(function() { 
    // get hour of time 
    var hour = (new Date).getHours(); 

    // remove select class if already applied 
    $('.select').removeClass('select'); 

    if (hour < 7) { // 0:00 to 6:59 
     $('#btn_1').addClass('select'); 
    } else if (hour < 11) { // 7:00 to 10:59 
     $('#btn_2').addClass('select'); 
    } else if (hour < 16) { // 11:00 to 15:59 
     $('#btn_3').addClass('select'); 
    } 

}) 

演示：http://jsfiddle.net/fS3jj/

Answer 2

這應該做的伎倆......

var classes = ['select', 'btn_1', 'btn_2', 'btn_3'); 

$('div') 
// Remove any of the existing defined classes added to elements. 
.removeClass(classes.join(' ')) 
// Add the class based on the hour of the day. 
.addClass(function() { 
    var hour = (new Date).getHours(); 

    if (hour < 6) { 
     return classes[0]; 
    } else if (hour < 10) { 
     return classes[1]; 
    } else if (hour < 15) { 
     return classes[2]; 
    } 

    return classes[3]; 
}); 

jsFiddle。

或者，您可以使用一個對象來保存classes，其中每個值都是小時的上限，並將Object.keys(classes).join(' ')傳遞給removeClass()。

然後，您可以大大簡化addClass()函數的正文。

但是，我沒有采用這種解決方案，因爲Object.keys()沒有最好的瀏覽器支持，並且它與內嵌的勻化片是冗長的。