嘗試使用“for...of”回圈訪問“id”值-有解無憂

我的 auditTime 函式需要一些幫助。"for . . of" 回圈應該遍歷類名為 "time-block" 的 div HTML 集合的每個元素，并將該 div 的 id 的數字值分配給變數 blockHour。然后，我想根據它與 currentHour 變數的讀取的關系對 div 進行顏色編碼。但是，有些東西不起作用，我無法弄清楚。謝謝！jsFiddle

// jumbotron display 
var currentDay = document.getElementById("currentDay")
currentDay.textContent = moment().format('MMMM Do YYYY, h:mm a')
var checkTime = setInterval(() => {
  currentDay.textContent = moment().format('MMMM Do YYYY, h:mm a')
}, (1000 * 60));


// setting and getting calendar events 
$(".saveBtn").click(function(event) {
  var eventHour = $(this).siblings(".hour").html()
  var eventText = $(this).siblings("input[name=event-input]").val().trim()
  $("input[name=event-input]").val("");
  var calEventObj = {
    text: eventText,
    hour: eventHour
  }
  saveCalEvent(calEventObj);
  var calEventLi = document.createElement("li")
  calEventLi.textContent = calEventObj.text
  $("#list-"   calEventObj.hour).append(calEventLi);
});

function saveCalEvent(calEventObj) {
  var currentEvents = loadCalEvents();
  currentEvents.push(calEventObj);
  localStorage.setItem("calEventObjects", JSON.stringify(currentEvents))
}

function loadCalEvents() {
  var calEventsArr = JSON.parse(localStorage.getItem("calEventObjects"));
  if (!calEventsArr || !Array.isArray(calEventsArr)) return []
  else return calEventsArr;
}
var showCalendar = function() {
  var currentEvents = loadCalEvents();
  for (var item of currentEvents) {
    var calEventLi = document.createElement("li")
    calEventLi.textContent = item.text
    $("#list-"   item.hour).append(calEventLi);
  }
}
showCalendar();

// time block color-coded to indicate past, present, or future
var currentTime = new Date();
var currentHour = currentTime.getHours();

var auditTime = function() {
  for (var block of $(".time-block")) {
    blockHour = parseInt(block.getAttribute("id"))
    if (blockHour === currentHour) {
      $(this).addClass("present")
    } else if (blockHour < currentHour) {
      $(this).addClass("past")
    } else {
      $(this).addClass("future")
    }
  }
}
auditTime()

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 1;
}

textarea {
  background: transparent;
  border: none;
  resize: none;
  color: #000000;
  border-left: 1px solid black;
  padding: 10px;
}

.jumbotron {
  text-align: center;
  background-color: transparent;
  color: black;
  border-radius: 0;
  border-bottom: 10px solid black;
}

.description {
  white-space: pre-wrap;
}

.time-block {
  text-align: center;
  border-radius: 15px;
}

.row {
  white-space: pre-wrap;
  height: 80px;
  border-top: 1px solid white;
  ;
}

.hour {
  background-color: #ffffff;
  color: #000000;
  border-top: 1px dashed #000000;
}

.past {
  background-color: #d3d3d3;
  color: white;
}

.present {
  background-color: #ff6961;
  color: white;
}

.future {
  background-color: #77dd77;
  color: white;
}

.saveBtn {
  border-left: 1px solid black;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  background-color: #06AED5;
  color: white;
}

.saveBtn i:hover {
  font-size: 20px;
  transition: all .3s ease-in-out;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ 1lW4y57PTFmhCaXp0ML5d60M1M7uH2 nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open Sans&display=swap" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic-bootstrap.min.css" />
  <link rel="stylesheet" href="assets/css/style.css" />
  <title>Work Day Scheduler</title>
</head>

<body>
  <header class="jumbotron">
    <h1 class="display-3">Work Day Scheduler</h1>
    <p class="lead">A simple calendar app for scheduling your work day</p>
    <p id="currentDay" class="lead"></p>
  </header>
  <div class="container f-flex flex-column">
    <!-- hour blocks -->
    <div class="d-flex flex-row row">
      <div id="9" class="time-block d-flex w-100">
        <h4 class="hour">9AM</h4>
        <ul id="list-9AM" class="event-list d-flex flex-column"></ul>
        <input type="text" name="event-input" class="event-form" placeholder="" autocomplete="off" />
        <button class="saveBtn">
            <i class="oi oi-calendar"></i>
          </button>
      </div>
    </div>
    <div class="d-flex fle√x-row row">
      <div id="10" class="time-block d-flex w-100 h-100">
        <h4 class="hour">10AM</h4>
        <ul id="list-10AM" class="event-list"></ul>
        <input type="text" name="event-input" class="event-form" placeholder="" autocomplete="off" />
        <button class="saveBtn">
            <i class="oi oi-calendar"></i>
          </button>
      </div>
    </div>
    <div class="d-flex flex-row row">
      <div id="11" class="time-block d-flex w-100 h-100">
        <h4 class="hour">11AM</h4>
        <ul id="list-11AM" class="event-list"></ul>
        <input type="text" name="event-input" class="event-form" placeholder="" autocomplete="off" />
        <button class="saveBtn">
            <i class="oi oi-calendar"></i>
          </button>
      </div>
    </div>
    <div class="d-flex flex-row row">
      <div id="12" class="time-block d-flex w-100 h-100">
        <h4 class="hour">12PM</h4>
        <ul id="list-12PM" class="event-list"></ul>
        <input type="text" name="event-input" class="event-form" placeholder="" autocomplete="off" />
        <button class="saveBtn">
            <i class="oi oi-calendar"></i>
          </button>
      </div>
    </div>
    <div class="d-flex flex-row row">
      <div id="13" class="time-block d-flex w-100 h-100">
        <h4 class="hour">1PM</h4>
        <ul id="list-1PM" class="event-list"></ul>
        <input type="text" name="event-input" class="event-form" placeholder="" autocomplete="off" />
        <button class="saveBtn">
            <i class="oi oi-calendar"></i>
          </button>
      </div>
    </div>
    <div class="d-flex flex-row row">
      <div id="14" class="time-block d-flex w-100 h-100">
        <h4 class="hour">2PM</h4>
        <ul id="list-2PM" class="event-list"></ul>
        <input type="text" name="event-input" class="event-form" placeholder="" autocomplete="off" />
        <button class="saveBtn">
            <i class="oi oi-calendar"></i>
          </button>
      </div>
    </div>
    <div class="d-flex flex-row row">
      <div id="15" class="time-block d-flex w-100 h-100">
        <h4 class="hour">3PM</h4>
        <ul id="list-3PM" class="event-list"></ul>
        <input type="text" name="event-input" class="event-form" placeholder="" autocomplete="off" />
        <button class="saveBtn">
            <i class="oi oi-calendar"></i>
          </button>
      </div>
    </div>
    <div class="d-flex flex-row row">
      <div id="16" class="time-block d-flex w-100 h-100">
        <h4 class="hour">4PM</h4>
        <ul id="list-4PM" class="event-list"></ul>
        <input type="text" name="event-input" class="event-form" placeholder="" autocomplete="off" />
        <button class="saveBtn">
            <i class="oi oi-calendar"></i>
          </button>
      </div>
    </div>
    <div class="d-flex flex-row row">
      <div id="17" class="time-block d-flex w-100 h-100">
        <h4 class="hour">5PM</h4>
        <ul id="list-5PM" class="event-list"></ul>
        <input type="text" name="event-input" class="event-form" placeholder="" autocomplete="off" />
        <button class="saveBtn">
            <i class="oi oi-calendar"></i>
          </button>
      </div>
    </div>
  </div>

  <!-- jQuery methods -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!-- jQuery UI -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <!-- jQuery UI for mobile -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/jquery.ui.touch-punch.min.js"></script>
  <!-- Popper -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js"></script>
  <!-- Bootstrap -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <!-- MomentJS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
  <!-- js script -->
  <script src="./assets/js/script.js"></script>
</body>

</html>

uj5u.com熱心網友回復：

您正在為新類分配$(this).addClass("present")等等...$(this)未定義。相反，使用$(block).addClass("present")

jsfiddle在這里：https ://jsfiddle.net/fe56bjks/7/

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/406941.html

標籤：

上一篇：如何更新相關表MYSQL？

下一篇：使這個輪播自動移動