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()没有最好的浏览器支持，并且它与内嵌的匀化片是冗长的。