問題嘗試根據小時動態顏色代碼行

我正在開發一個 JS 專案，在該專案中我創建了一個每日調度程式，并且每個小時都應該根據它是過去、現在還是未來進行顏色編碼。

時間表從上午 9 點到下午 5 點。目前它正在將未來的類應用于每個塊，因此每一行都顯示為綠色。相反，假設現在是上午 11 點，那么上午 11 點的行會以紅色突出顯示當前時間，上午 11 點之前的行將是灰色或透明的，而未來的時間將是綠色的。

我已經為我的每個小時塊設定了 ID，以決議并與當前小時進行比較，但由于某種原因它不起作用。我已經在我的 CSS 中為過去現在和未來設定了類。

var blocks = document.getElementsByClassName("description");
var hourBlock = parseInt(moment().format('H'));


Array.from(blocks).forEach(description => {
  let idString = description.id, rowHour;
  
  if (idString) {
    rowHour = parseInt(idString);
  }
  
  if (rowHour) {
    if (hourBlock === rowHour) {
      $(".description").addClass("present")
    } else if (hourBlock < rowHour) {
      $(".description").addClass("past")
    } else {
      $(".description").addClass("future");
    }
  }
});

uj5u.com熱心網友回復：

問題是因為在您的回圈中，您正在更新所有 .description元素的類，而不是forEach回圈中的元素。

為了解決這個問題，并使您的代碼更加簡潔，您可以將一個函式傳遞給 jQuery 的addClass()方法，該函式將針對集合中的每個元素單獨進行評估。在此函式中，您可以id根據當前時間（您不需要 MomentJS）檢查元素的時間并設定適當的類。嘗試這個：

// let nowHour = (new Date()).getHours();
let nowHour = 13; // hard-coding value for this demo
$('.description').addClass(function() {
  return  this.id === nowHour ? 'present' :  this.id < nowHour ? 'past' : 'future'; 
});

.present { background-color: #C00; }
.past { background-color: #CCC; }
.future { background-color: #0C0; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="description" id="9">9am</div>
<div class="description" id="10">10am</div>
<div class="description" id="11">11am</div>
<div class="description" id="12">12pm</div>
<div class="description" id="13">1pm</div>
<div class="description" id="14">2pm</div>
<div class="description" id="15">3pm</div>
<div class="description" id="16">4pm</div>
<div class="description" id="17">5pm</div>

uj5u.com熱心網友回復：

任何時候你呼叫這樣的代碼：

$(".description").addClass("past");

...它將查詢所有具有類“描述”的元素，并將該類設定為過去。您要做的只是設定回圈中正在檢查的元素的類。

由于您使用的是 jquery，因此我們不需要 getElementsByClassName('description')，因為它可以翻譯為 $('.description')。

// using jquery's each to loop through the collection
$('.description').each((idx, elt) => {
   $(elt).removeClass(); // no params to clear ALL classes from element
   // put whatever logic you want to analyze the element (elt)
   $(elt).addClass("whateverClassYouWant");
   // add the description back on, or don't remove it and instead removeClass('specificClass') for each past/present/future
   $(elt).addClass("description");
});

在您的代碼中，您永遠不會洗掉類，您只需繼續添加它們。您為元素分配了正確的類似乎是合理的，但是由于您從未洗掉不正確的類（或所有元素都具有所有類！），因此 CSS 必須根據內部優先級選擇哪種顏色覆寫其他基礎。

您不希望有任何歧義 - 每個專案應該只有它需要的 1 個類，因此不帶引數的 .removeClass() 呼叫將在您重新添加所需的類之前洗掉所有類。

uj5u.com熱心網友回復：

HTML 沒有發布，所以我使用了最合適的標簽：<table>它是子標簽。只需將所有內容收集<th>到一個陣列中，然后遍歷它們，回呼只是一個if/if else用于確定className分配的流控制陳述句。小時由實時決定。

let t = new Date()
let hour = t.getHours();
const cols = [...document.querySelectorAll('th')];
cols.forEach(h => h.className = '');
cols.forEach((h, i) => {
  if (i   9 < hour) {
    h.className = 'past';
  } else if (i   9 > hour) {
    h.className = 'future';
  } else {
    h.className = 'present';
  }
});

.past {
  background: grey
}

.future {
  background: green
}

.present {
  background: red
}

<table>
  <thead>
    <tr>
      <th>9AM</th>
      <th>10AM</th>
      <th>11AM</th>
      <th>12PM</th>
      <th>1PM</th>
      <th>2PM</th>
      <th>3PM</th>
      <th>4PM</th>
      <th>5PM</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>

標籤：javascript jQuery css if 语句

上一篇：C char*作為函式引數

下一篇：在Excel中嵌套DATEDIF和IF陳述句