Question

我有以下HTML

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

我想在一段时间内添加一个css类，例如：如果小时在00:00到06:59之间，请将“select”类添加到id“btn_1”，时间为07:00到10:59 am将类添加到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 )的内容很简洁。

在Jquery上添加一段时间

2 个答案: