多个 HTML 实例的运行函数答案

【问题标题】：Run function for multiple HTML instances多个 HTML 实例的运行函数
【发布时间】：2020-07-07 04:19:39
【问题描述】：

我有几个 div，每个都有一个倒计时栏。该栏仅适用于第一个 div。我正在尝试让它在所有 div 上工作。

我尝试为所有 HTML 元素的数组添加一个“加载”事件侦听器。但该功能似乎没有触发。我知道我遗漏了一些非常基本的东西，但请耐心等待，我正在尝试找出所有这些背后的逻辑。

我有什么遗漏吗？粘贴在下面的完整sn-p中。谢谢！

const today = new Date()
const tomorrow = new Date(today)
tomorrow.setDate(tomorrow.getDate() + 1)
tomorrow.setHours(12, 00)
today.setHours(12, 00)
//Get all divs with carousel-class cell
var offers = document.querySelector(".carousel-cell")
offers.addEventListener("load", updateTime, false)

// Set countdown date
var countDownDate = today.getTime()

// Update the count down every 1 second

function updateTime(e) {
  var x = setInterval(function () {
    alert("works")
    // Get today's date and time
    var now = new Date().getTime()

    // Find the distance between now and the count down date
    var distance = countDownDate - now

    // Time calculations for days, hours, minutes and seconds
    var days = Math.floor(distance / (1000 * 60 * 60 * 24))
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))
    var seconds = Math.floor((distance % (1000 * 60)) / 1000)

    // Display the result in the element with id="demo"
    document.getElementById("timebar").innerHTML = "Valabil inca " + hours + "ore " + minutes + "m " + seconds + "s "
    
    // Make progress bar move
    var timeleft = hours * 60 + minutes
    console.log(timeleft)
    progress(timeleft, 360, $("#progressBar"))

    // If the count down is finished, write some text
    if (distance < 0) {
      clearInterval(x)
      document.getElementById("timebar").innerHTML = "Oferta a expirat"
    }
  }, 1000)
}

function progress(timeleft, timetotal, $element) {
  var progressBarWidth = (timeleft * $element.width()) / timetotal
  console.log(`width: ${$element.width()} px  |  time left: ${timeleft} sec`)
  $element.find("div").animate(
    {
      width: progressBarWidth
    },
    timeleft == timetotal ? 0 : 1000,
    "linear"
  )

  if (timeleft > 0) {
    setTimeout(progress, 1000, timeleft - 1, timetotal, $element)
  }
}

/*
function move() {
  var elem = document.getElementById("myBar")
  var width = 100
  var id = setInterval(frame, 10)
  function frame() {
    if (width <= 0) {
      clearInterval(id)
    } else {
      width -= 1
      elem.style.width = width + "%"
      document.getElementById("demo").innerHTML = width * 1 + "%"
    }
  }
}

function openTab(tabName) {
  var i
  var x = document.getElementsByClassName("tab")
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none"
  }
  document.getElementById(tabName).style.display = "block"
} */
function openTab(evt, tabName) {
  var i, x, tablinks
  x = document.getElementsByClassName("tab")
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none"
  }
  tablinks = document.getElementsByClassName("tablink")
  for (i = 0; i < x.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" bg-light-yellow", "")
  }
  document.getElementById(tabName).style.display = "block"
  evt.currentTarget.className += " bg-light-yellow"
}

document.addEventListener(
  "DOMContentLoaded",
  () => {
    //...get the button
    let btn = document.querySelector("#defaultOpen")

    //...trigger the click event on page enter
    btn.click()
  },
  false
)

#progressBar div {
  background: gray;
  height: 1em;
  border-radius: 15px;
}

<!DOCTYPE html>
<html lang="en">
  <title> </title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css" />
  <link rel="stylesheet" href="/egoist-ty/main.css" />
  <link rel="stylesheet" href="https://npmcdn.com/flickity@2/dist/flickity.css" />

  <!-- partial -->
  <script src="https://npmcdn.com/flickity@2/dist/flickity.pkgd.js"></script>
  <script src="/egoist-ty/timebar.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://kit.fontawesome.com/d545d9c4c7.js" crossorigin="anonymous"></script>

  <body class="cf bg-black" style="background: url(/egoist-ty/images/background-min.jpg) no-repeat center center fixed; background-size: cover;">
   

    <div class="cf center w-100 w-70-l sans-serif">
      <div class="carousel tab" id="11" data-flickity='{ "wrapAround": false , "groupCells":true , "prevNextButtons":false}'>
        <div class="carousel-cell w5 ma1">
          <article class="center bg-white br3 pa2 pa3-ns ba b--black-10">
            <div class="">
              <div class="f3 dib orange b" id="reducere" value="1">20%</div>
              <div class="f5 dib w-20">Reducere</div>
              <i class="w-10 fas fa-info-circle dim fr mv2"></i>
              <h1 class="db f3 mv1">Consiliere Styling</h1>
              <hr class="w-100 bw1 b--black-10" />
            </div>
            <p class="lh-copy measure center f6 black-70">
              Consiliere Styling 75lei/ 30 Minute. <b>(15lei/15min)</b> <br />
              Intre orele 8:00-16:00
            </p>
            <p id="timebar" class="center">Valabil:</p>
            <div id="progressBar" class="bg-black-10 br3">
              <div></div>
            </div>
            <a class="f5 w-100 tc br2 mv3 link dim ph3 pv3 mb2 dib white bg-orange" href="#0">Rezerva</a>
            <p class="f6 mv0 orange">Au mai rămas 2 locuri</p>
          </article>
        </div>

        <div class="carousel-cell w5 ma1">
          <article class="center bg-white br3 pa2 pa3-ns ba b--black-10">
            <div class="">
              <div class="f3 dib orange b" id="reducere" value="2">20%</div>
              <div class="f5 dib w-20">Reducere</div>
              <i class="w-10 fas fa-info-circle dim fr mv2"></i>
              <h1 class="db f3 mv1">Coafat</h1>
              <hr class="w-100 bw1 b--black-10" />
            </div>
            <p class="lh-copy measure center f6 black-70">
              Consiliere Styling 75lei/ 30 Minute. <br />
              Intre orele 8:00-16:00
            </p>
            <p id="timebar" class="center">This is time:</p>
            <div id="progressBar">
              <div></div>
            </div>
            <a class="f5 w-100 tc br2 mv3 link dim ph3 pv3 mb2 dib white bg-orange" href="#0">Rezerva</a>
            <p class="f6 mv0 orange">Au mai rămas 2 locuri</p>
          </article>
        </div>

        <div class="carousel-cell w5 ma1">
          <article class="center bg-white br3 pa2 pa3-ns ba b--black-10">
            <div class="">
              <div class="f3 dib orange b" id="reducere" value="3">30%</div>
              <div class="f5 dib w-20">Reducere</div>
              <i class="w-10 fas fa-info-circle dim fr mv2"></i>
              <h1 class="db f3 mv1">Mani-Pedi</h1>
              <hr class="w-100 bw1 b--black-10" />
            </div>
            <p class="lh-copy measure center f6 black-70">
              Consiliere Styling 75lei/ 30 Minute. <br />
              Intre orele 8:00-16:00
            </p>
            <p id="timebar" class="center">This is time:</p>
            <div id="progressBar">
              <div></div>
            </div>
            <a class="f5 w-100 tc br2 mv3 link dim ph3 pv3 mb2 dib white bg-orange" href="#0">Rezerva</a>
            <p class="f6 mv0 orange">Au mai rămas 2 locuri</p>
          </article>
        </div>

        <div class="carousel-cell w5 ma1">
          <article class="center bg-white br3 pa2 pa3-ns ba b--black-10">
            <div class="">
              <div class="f3 dib green b" id="reducere" value="4">20%</div>
              <div class="f5 dib w-20">Reducere</div>
              <i class="w-10 fas fa-info-circle dim fr mv2"></i>
              <h1 class="db f3 mv1">Cosmetică</h1>
              <hr class="w-100 bw1 b--black-10" />
            </div>
            <p class="lh-copy measure center f6 black-70">
              Consiliere Styling 75lei/ 30 Minute. <br />
              Intre orele 8:00-16:00
            </p>
            <p id="timebar" class="center">This is time:</p>
            <div id="progressBar">
              <div></div>
            </div>
            <a class="f5 w-100 tc br2 mv3 link dim ph3 pv3 mb2 dib white bg-orange" href="#0">Rezerva</a>
            <p class="f6 mv0 orange">Au mai rămas 2 locuri</p>
          </article>
        </div>
      </div>

      <div class="carousel tab" id="12" data-flickity='{ "wrapAround": false , "groupCells":true , "prevNextButtons":false}'>
        <div class="carousel-cell w5 ma1">
          <article class="center bg-yellow br3 pa2 pa3-ns ba b--black-10">
            <div class="">
              <div class="f3 dib orange b" id="reducere" value="1">20%</div>
              <div class="f5 dib w-20">Reducere</div>
              <i class="w-10 fas fa-info-circle dim fr mv2"></i>
              <h1 class="db f3 mv1">Consiliere Styling</h1>
              <hr class="w-100 bw1 b--black-10" />
            </div>
            <p class="lh-copy measure center f6 black-70">
              Consiliere Styling 75lei/ 30 Minute. <b>(15lei/15min)</b> <br />
              Intre orele 8:00-16:00
            </p>
            <p id="timebar" class="center">Valabil:</p>
            <div id="progressBar" class="bg-pink br4">
              <div></div>
            </div>
            <a class="f5 w-100 tc br2 mv3 link dim ph3 pv3 mb2 dib white bg-orange" href="#0">Rezerva</a>
            <p class="f6 mv0 orange">Au mai rămas 2 locuri</p>
          </article>
        </div>

        <div class="carousel-cell w5 ma1">
          <article class="center bg-yellow br3 pa2 pa3-ns ba b--black-10">
            <div class="">
              <div class="f3 dib orange b" id="reducere" value="2">20%</div>
              <div class="f5 dib w-20">Reducere</div>
              <i class="w-10 fas fa-info-circle dim fr mv2"></i>
              <h1 class="db f3 mv1">Coafat</h1>
              <hr class="w-100 bw1 b--black-10" />
            </div>
            <p class="lh-copy measure center f6 black-70">
              Consiliere Styling 75lei/ 30 Minute. <br />
              Intre orele 8:00-16:00
            </p>
            <p id="timebar" class="center">This is time:</p>
            <div id="progressBar">
              <div></div>
            </div>
            <a class="f5 w-100 tc br2 mv3 link dim ph3 pv3 mb2 dib white bg-orange" href="#0">Rezerva</a>
            <p class="f6 mv0 orange">Au mai rămas 2 locuri</p>
          </article>
        </div>

        <div class="carousel-cell w5 ma1">
          <article class="center bg-yellow br3 pa2 pa3-ns ba b--black-10">
            <div class="">
              <div class="f3 dib orange b" id="reducere" value="3">30%</div>
              <div class="f5 dib w-20">Reducere</div>
              <i class="w-10 fas fa-info-circle dim fr mv2"></i>
              <h1 class="db f3 mv1">Mani-Pedi</h1>
              <hr class="w-100 bw1 b--black-10" />
            </div>
            <p class="lh-copy measure center f6 black-70">
              Consiliere Styling 75lei/ 30 Minute. <br />
              Intre orele 8:00-16:00
            </p>
            <p id="timebar" class="center">This is time:</p>
            <div id="progressBar">
              <div></div>
            </div>
            <a class="f5 w-100 tc br2 mv3 link dim ph3 pv3 mb2 dib white bg-orange" href="#0">Rezerva</a>
            <p class="f6 mv0 orange">Au mai rămas 2 locuri</p>
          </article>
        </div>

        <div class="carousel-cell w5 ma1">
          <article class="center bg-yellow br3 pa2 pa3-ns ba b--black-10">
            <div class="">
              <div class="f3 dib green b" id="reducere" value="4">20%</div>
              <div class="f5 dib w-20">Reducere</div>
              <i class="w-10 fas fa-info-circle dim fr mv2"></i>
              <h1 class="db f3 mv1">Cosmetică</h1>
              <hr class="w-100 bw1 b--black-10" />
            </div>
            <p class="lh-copy measure center f6 black-70">
              Consiliere Styling 75lei/ 30 Minute. <br />
              Intre orele 8:00-16:00
            </p>
            <p id="timebar" class="center">This is time:</p>
            <div id="progressBar">
              <div></div>
            </div>
            <a class="f5 w-100 tc br2 mv3 link dim ph3 pv3 mb2 dib white bg-orange" href="#0">Rezerva</a>
            <p class="f6 mv0 orange">Au mai rămas 2 locuri</p>
          </article>
        </div>
      </div>

      <div class="pa3 mv4 w-100 sans-serif center">
        <div class="bg-light-gray mh2 br3 flex flex-wrap overflow-x-auto pointer">
          <div class="tc w-50 w-25-l pa3 dib br b--black-30 pr3 hover-bg-yellow tablink" onclick="openTab(event,'11')" id="defaultOpen">
            <i class="fas fa-sun di"></i>
            <a class="di black-80">Oferte de azi dimineata</a>
          </div>

          <div class="tc w-50 w-25-l pa3 dib br b--black-30 pr3 hover-bg-light-purple tablink" onclick="openTab(event,'12')">
            <i class="fas fa-moon"></i>
            <a class="di black-80">Oferte de azi seara</a>
          </div>

          <div class="tc w-50 w-25-l pa3 dib br b--black-30 pr3 dim hover-bg-yellow">
            <i class="fas fa-sun di"></i>
            <p class="di black-80">Oferte de</p>
            <p class="maine di black-70">maine</p>
            <p class="di">dimineata</p>
          </div>

          <div class="tc w-50 w-25-l pa3 dib br b--black-30 pr3 dim hover-bg-light-purple">
            <i class="fas fa-moon"></i>
            <p class="di black-80">Oferte de</p>
            <p class="maine di">maine</p>
            <p class="di">seara</p>
          </div>
        </div>
      </div>

      <div class="pa3-l pa3 mv4">
        <form class="bg-light-red mw7 center pa4 br2-ns ba b--black-10">
          <fieldset class="cf bn ma0 pa0">
            <legend class="pa0 sans-serif f5-ns mb3 black-80">Sign up for our newsletter</legend>
            <div class="cf">
              <label class="clip" for="email-address">Email Address</label>
              <input class="f6 f5-l sans-serif input-reset bn fl black-80 bg-white pa3 lh-solid w-100 w-75-m w-80-l br2-ns br--left-ns" placeholder="Your Email Address" type="text" name="email-address" value="" id="email-address" />
              <input class="f6 f5-l button-reset fl pv3 tc bn bg-animate bg-black-70 hover-bg-black white pointer w-100 w-25-m w-20-l br2-ns br--right-ns" type="submit" value="Subscribe" />
            </div>
          </fieldset>
        </form>
      </div>
    </div>
  </body>
</html>

【问题讨论】：

您使用的querySelector('.') 方法返回第一个匹配元素。如果您想将该事件侦听器添加到所有元素，请尝试使用 querySelectorAll 方法，但这需要遍历这些元素并将该事件侦听器添加到每个元素。

标签： javascript html jquery addeventlistener

【解决方案1】：

在 HTML 中 id 每个元素应该是唯一的。尝试在元素之间共享timebar，方法是将其放在class 而不是id 属性中。

<p  class="center timebar">This is time:</p>

并尝试使用 Pure JavaScript 更改具有该 class 的所有 HTML 元素：

    var timebarList= document.getElementsByClassName("timebar");
    for (var i = 0; i < timebarList.length; i++) {
        timebarList[i].innerHTML = "your text here";
    }

【讨论】：

【解决方案2】：

var offers = document.querySelector(".carousel-cell")
offers.addEventListener("load", updateTime, false)

根据 mozilla 文档：https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

Document 方法 querySelector() 返回文档中与指定选择器或选择器组匹配的第一个元素。如果没有找到匹配项，则返回 null。

您将希望使用 querySelectorAll() 代替，然后遍历项目

var offers = document.querySelectorAll(".carousel-cell")
for(var offer in offers){
    offer.addEventListener("load", updateTime, false);
}

【讨论】：