单独运行每个Div类的功能

Question

我的目标是为每个商家<div class="business">插入当天的营业时间，因为这已成为商家信息网站的一个更常见的功能，包括＆＃34;今天的营业时间＆＃34;

到目前为止，我能够根据当天显示第一个业务div的小时数。但是，我无法为每个<div class="business">重复此功能。每个业务div中的ID都是特定于该业务的，但我发现整个HTML中有多个相同的ID。

我试图将代码隔离为专门为每个<div class="business">运行，但它仍继续只在第一个实例上运行。我已经读过.each（）等等，但似乎没有什么能适合我的特殊情况。

以下是我的测试HTML：

<div class="business">
  <h3> Business One </h3>
  <p id="dayZero">Sunday Hours 1</p>
  <p id="dayOne">Monday Hours 1</p>
  <p id="dayTwo">Tuesday Hours 1</p>
  <p id="dayThree">Wednesday Hours 1</p>
  <p id="dayFour">Thursday Hours 1</p>
  <p id="dayFive">Friday Hours 1</p>
  <p id="daySix">Saturday Hours 1</p>
  <p style="color:red">Today's Hours: <span id="currHours"></span></p>
</div>

<hr>

<div class="business">
  <h3> Business Two </h3>
  <p id="dayZero">Sunday Hours 2</p>
  <p id="dayOne">Monday Hours 2</p>
  <p id="dayTwo">Tuesday Hours 2</p>
  <p id="dayThree">Wednesday Hours 2</p>
  <p id="dayFour">Thursday Hours 2</p>
  <p id="dayFive">Friday Hours 2</p>
  <p id="daySix">Saturday Hours 2</p>
  <p style="color:red">Today's Hours: <span id="currHours"></span></p>
</div>

<script>
getCurrHours();
</script>

这是我的JavaScript：

function getCurrHours() {

  var dayZero = document.getElementById("dayZero").innerHTML;
  var dayOne = document.getElementById("dayOne").innerHTML;
  var dayTwo = document.getElementById("dayTwo").innerHTML;
  var dayThree = document.getElementById("dayThree").innerHTML;
  var dayFour = document.getElementById("dayFour").innerHTML;
  var dayFive = document.getElementById("dayFive").innerHTML;
  var daySix = document.getElementById("daySix").innerHTML;

  var currDay = getCurrDay();

  function getCurrDay() {
  switch (new Date().getDay()) {
      case 0:
          day = "Sunday";
          break;
      case 1:
          day = "Monday";
          break;
      case 2:
          day = "Tuesday";
          break;
      case 3:
          day = "Wednesday";
          break;
      case 4:
          day = "Thursday";
          break;
      case 5:
          day = "Friday";
          break;
      case 6:
          day = "Saturday";
      }
  return day;
  }

  var currHours = compareDays();

  function compareDays() {
    switch ( currDay ) {
      case "Sunday":
          hours = document.getElementById("currHours").innerHTML = dayZero;
          break;
      case "Monday":
          hours = document.getElementById("currHours").innerHTML = dayOne;
          break;
      case "Tuesday":
          hours = document.getElementById("currHours").innerHTML = dayTwo;
          break;
      case "Wednesday":
          hours = document.getElementById("currHours").innerHTML = dayThree;
          break;
      case "Thursday":
          hours = document.getElementById("currHours").innerHTML = dayFour;
          break;
      case "Friday":
          hours = document.getElementById("currHours").innerHTML = dayFive;
          break;
      case "Saturday":
          hours = document.getElementById("currHours").innerHTML = daySix;
      }
  return currHours;
  }

}

这是JSFiddle：JSFiddle Example

Answer 1

在HTML文档中，ID始终必须是唯一的，否则在尝试选择元素时会出现很多不可预测的行为。

将其更改为如下所示的结构。通过消除重复的id并循环遍历业务元素，可以直接使用简单的forEach来获取所有需要的营业时间。

var currDay = (new Date).getDay();
var businesses = document.querySelectorAll(".business");

businesses.forEach(function(business){
  // use a regular string concatenation if you need better browser compatibility
  var currHours = business.querySelector(`p[data-day='${currDay}']`);
  var currHoursDisplay = business.querySelector(".currHours");
  currHoursDisplay.innerHTML = currHours.innerHTML;
});

<div class="business">
<h3>
Business One
</h3>
<p data-day="0">Sunday Hours 1</p>
<p data-day="1">Monday Hours 1</p>
<p data-day="2">Tuesday Hours 1</p>
<p data-day="3">Wednesday Hours 1</p>
<p data-day="4">Thursday Hours 1</p>
<p data-day="5">Friday Hours 1</p>
<p data-day="6">Saturday Hours 1</p>
<p style="color:red">Today's Hours: <span class="currHours"></span></p>
</div>

<div class="business">
<h3>
Business One
</h3>
<p data-day="0">Sunday Hours 2</p>
<p data-day="1">Monday Hours 3</p>
<p data-day="2">Tuesday Hours 2</p>
<p data-day="3">Wednesday Hours 2</p>
<p data-day="4">Thursday Hours 4</p>
<p data-day="5">Friday Hours 3</p>
<p data-day="6">Saturday Hours 2</p>
<p style="color:red">Today's Hours: <span class="currHours"></span></p>
</div>

Answer 2

以下是：

https://jsfiddle.net/ChefGabe/qp3ahLue/10/

它会找到每个有querySelectorAll的商家，并为每个<div class="business">运行您的代码。

＆＃13;

＆＃13;

document.querySelectorAll('.business').forEach(function(business) {
    getCurrHours(business);
});


function getCurrHours(business) {

    var dayZero = business.querySelector("#dayZero").innerHTML;
    var dayOne = business.querySelector("#dayOne").innerHTML;
    var dayTwo = business.querySelector("#dayTwo").innerHTML;
    var dayThree = business.querySelector("#dayThree").innerHTML;
    var dayFour = business.querySelector("#dayFour").innerHTML;
    var dayFive = business.querySelector("#dayFive").innerHTML;
    var daySix = business.querySelector("#daySix").innerHTML;

    var currHours = business.querySelector("#currHours");

    switch (getCurrDay()) {
        case "Sunday":
            currHours.innerHTML = dayZero;
            break;
        case "Monday":
            currHours.innerHTML = dayOne;
            break;
        case "Tuesday":
            currHours.innerHTML = dayTwo;
            break;
        case "Wednesday":
            currHours.innerHTML = dayThree;
            break;
        case "Thursday":
            currHours.innerHTML = dayFour;
            break;
        case "Friday":
            currHours.innerHTML = dayFive;
            break;
        case "Saturday":
            currHours.innerHTML = daySix;
    }
}


function getCurrDay() {
    switch (new Date().getDay()) {
        case 0:
            day = "Sunday";
            break;
        case 1:
            day = "Monday";
            break;
        case 2:
            day = "Tuesday";
            break;
        case 3:
            day = "Wednesday";
            break;
        case 4:
            day = "Thursday";
            break;
        case 5:
            day = "Friday";
            break;
        case 6:
            day = "Saturday";
    }
    return day;
}

＆＃13;

<div class="business">
    <h3>Business One</h3>
    <p id="dayZero">Sunday Hours 1</p>
    <p id="dayOne">Monday Hours 1</p>
    <p id="dayTwo">Tuesday Hours 1</p>
    <p id="dayThree">Wednesday Hours 1</p>
    <p id="dayFour">Thursday Hours 1</p>
    <p id="dayFive">Friday Hours 1</p>
    <p id="daySix">Saturday Hours 1</p>
    <p style="color:red">Today's Hours: <span id="currHours"></span></p>
</div>
<hr>
<div class="business">
    <h3>Business Two</h3>
    <p id="dayZero">Sunday Hours 2</p>
    <p id="dayOne">Monday Hours 2</p>
    <p id="dayTwo">Tuesday Hours 2</p>
    <p id="dayThree">Wednesday Hours 2</p>
    <p id="dayFour">Thursday Hours 2</p>
    <p id="dayFive">Friday Hours 2</p>
    <p id="daySix">Saturday Hours 2</p>
    <p style="color:red">Today's Hours: <span id="currHours"></span></p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

这里有很多很棒的答案，但是这里是如何使用jQuery的。我非常鼓励学习语言学习！

＆＃13;

＆＃13;

$(document).ready(function() {
  var day = new Date().getDay();

  $(".business").each(function() {
    $(".currHours", this).html($(".day-" + day, this).html());
  })
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="business">
  <h3>Business One</h3>
  <p class="day-0">Sunday Hours 1</p>
  <p class="day-1">Monday Hours 1</p>
  <p class="day-2">Tuesday Hours 1</p>
  <p class="day-3">Wednesday Hours 1</p>
  <p class="day-4">Thursday Hours 1</p>
  <p class="day-5">Friday Hours 1</p>
  <p class="day-6">Saturday Hours 1</p>
  <p style="color:red">Today's Hours: <span class="currHours"></span></p>
</div>

<hr>

<div class="business">
  <h3>Business Two</h3>
  <p class="day-0">Sunday Hours 2</p>
  <p class="day-1">Monday Hours 2</p>
  <p class="day-2">Tuesday Hours 2</p>
  <p class="day-3">Wednesday Hours 2</p>
  <p class="day-4">Thursday Hours 2</p>
  <p class="day-5">Friday Hours 2</p>
  <p class="day-6">Saturday Hours 2</p>
  <p style="color:red">Today's Hours: <span class="currHours"></span></p>
</div>

＆＃13;

＆＃13;

＆＃13;

silently fails