在Javascript中簡化迭代if / else if語句

Question

我寫了一些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顯示#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');
    };


}