简化Javascript中的迭代if/else-if语句

Question

我写了一些JavaScript，根据时间的不同，这些JavaScript基本上可以显示不同的像素。我已经写了代码（至少有几秒钟），它运行得很好，但我在简化它时遇到了困难，所以我不必一遍又一遍地键入（几乎）相同的代码。

下面是我的代码示例：

    var getTime = function() {
            var date = new Date();
            var hours = date.getHours();
            var mins = date.getMinutes();
            var secs = date.getSeconds();
            if (secs==0) {
                for (var s=1; s < 60; s++) {
                    $("#s" + s).removeClass('display');
                };
            } else if (secs == 1) {
                for (var s=1; s < (secs+1); s++) {
                    $("#s" + s).addClass('display');
                };
            } else if (secs == 2) {
                for (var s=1; s < (secs+1); s++) {
                    $("#s" + s).addClass('display');
                };
            } else if (secs == 3) {
                for (var s=1; s < (secs+1); s++) {
                    $("#s" + s).addClass('display');
                };
            .........(cont.)
            } else if (secs == 59) {
                for (var s=1; s < (secs+1); s++) {
                    $("#s" + s).addClass('display');
                }
            }
        };

Answer 1

如果我理解正确，您将尝试根据秒数显示#s。简单的解决方案是清除所有内容并重新设置显示。

var getTime = function() {
   var date = new Date();
   var hours = date.getHours();
   var mins = date.getMinutes();
   var secs = date.getSeconds();
   //Hide all ids starting with 's'
   $('[id^=s]').removeClass('display');
   for (var s=1; s < (secs+1); s++) {
       $("#s" + s).addClass('display');
   }
};

Answer 2

（更新以确保行为正确，即使我们错过了一个勾号）

var getTime = function() {
    var date = new Date();
    var hours = date.getHours();
    var mins = date.getMinutes();
    var secs = date.getSeconds();
    for (var s = 0; s < 60; s++) {
      var elements = $("#s" + s);
      elements.removeClass('display');
      if (s <= secs) {
          elements.addClass('display');
      }
    }
}

Answer 3

我可能遗漏了一些东西，因为不明白为什么有59个else条件看起来是相同的

var getTime = function() {
    var date = new Date();
    var hours = date.getHours();
    var mins = date.getMinutes();
    var secs = date.getSeconds();
    if (secs==0)
        for (var s=1; s < 60; s++)
            $("#s" + s).removeClass('display');
    else
        for (var s=1; s < (secs+1); s++)
            $("#s" + s).addClass('display');
};

Answer 4

对于0 以上的秒，您的逻辑始终相同

if (secs < 1) {
    for (var s=1; s < 60; s++) {
        $("#s" + s).removeClass('display');
    };

} else {
    for (var s=1; s < (secs+1); s++) {
        $("#s" + s).addClass('display');
    };

}