Addclass jQueryの

Question

上の一定の期間、私は例えば、一定期間のCSSクラスを追加したい、次のHTML

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

持っている：時間は午前6時59分追加クラスに午後12時00分の間にある場合を"select" from 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()にはブラウザのサポートが一切なく、インラインでfor (in)が冗長であるため、この解決方法はありませんでした。