下载前倒计时仅适用于第一个按钮

Question

我在下载前有一个带有几秒钟计时器的下载按钮，但不幸的是，它仅适用于第一个按钮，而不适用于其他按钮。我希望它能够在每个下载按钮上正常工作，但我不知道如何解决这个问题。请帮忙！我附上了我一直在使用的 CSS、HTML 和 JavaScript。document.getElementById("download_button").addEventListener("click", function(event) {  event.preventDefault();  var timeleft = 3;  var downloadTimer = setInterval(function function1() {    document.getElementById('download').style.display = "none";    document.getElementById("timer").innerHTML = "Wait " + timeleft + "";    if (timeleft <= 0) {      clearInterval(downloadTimer);      document.getElementById("timer").innerHTML = ""      window.open(document.querySelector('#downloadbutton a').href, '_blank');      document.getElementById('download').style.display = "";    }    timeleft -= 1;  }, 1000);});.container {  position: absolute;  left: 50%;  top: 50%;  transform: translate(-50%, -50%);  text-align: center;}#download_button {  border: none;  margin-top: 0px;  padding: 10px;  width: 200px;  font-family: "montserrat", sans-serif;  text-transform: uppercase;  border-radius: 6px;  cursor: pointer;  color: #fff;  font-size: 16px;  transition: 0.4s;  line-height: 28px;  outline: none;}.button-1 {  background: #f12711;}.button-2 {  background: #0575E6;}.button-3 {  background: #fe8c00;}#download_button:hover {  background: #000000;}.title {  font-weight: bold;}<div id="downloadbutton" style="text-align: center;">  <a href="http:///www.google.com">    <button id="download_button" class="button-1">          <div class="title">Document Title 1</div>          <div id="download">DOWNLOAD</div>          <div id="timer"></div>        </button>  </a></div><br><div id="downloadbutton" style="text-align: center;">  <a href="http:///www.google.com">    <button id="download_button" class="button-2">          <div class="title">Document Title 2</div>          <div id="download">DOWNLOAD</div>          <div id="timer"></div>        </button>  </a></div>

Answer 1

使用不同 ID 的简单解决方案

function download(btn) {

  id = Number(btn.id.slice("downloadbutton".length+1))

  var timeleft = 3;

  var downloadTimer = setInterval(function function1() {

    document.getElementById('download' + id).style.display = "none";

    document.getElementById("timer" + id).innerHTML = "Wait " + timeleft + "";

    if (timeleft <= 0) {

      clearInterval(downloadTimer);

      document.getElementById("timer" + id).innerHTML = ""

      //window.open(document.querySelector('#downloadbutton' + id + ' a').href, '_blank');

      document.getElementById('download' + id).style.display = "";

    }

    timeleft -= 1;

  }, 1000);

}

.container {

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

  text-align: center;

}

#download_button {

  border: none;

  margin-top: 0px;

  padding: 10px;

  width: 200px;

  font-family: "montserrat", sans-serif;

  text-transform: uppercase;

  border-radius: 6px;

  cursor: pointer;

  color: #fff;

  font-size: 16px;

  transition: 0.4s;

  line-height: 28px;

  outline: none;

}

.button-1 {

  background: #f12711;

}

.button-2 {

  background: #0575E6;

}

.button-3 {

  background: #fe8c00;

}

#download_button:hover {

  background: #000000;

}

.title {

  font-weight: bold;

}

<div id="downloadbutton1" style="text-align: center;">

    <button id="download_button1" class="button-1" onclick="download(this)">

              <div class="title">Document Title 1</div>

              <div id="download1">DOWNLOAD</div>

              <div id="timer1"></div>

            </button>

</div>

<br>

<div id="downloadbutton2" style="text-align: center;">

    <button id="download_button2" class="button-2" onclick="download(this)">

              <div class="title">Document Title 2</div>

              <div id="download2">DOWNLOAD</div>

              <div id="timer2"></div>

            </button>

</div>

<br>

<div id="downloadbutton3" style="text-align: center;">

    <button id="download_button3" class="button-3" onclick="download(this)">

              <div class="title">Document Title 3</div>

              <div id="download3">DOWNLOAD</div>

              <div id="timer3"></div>

            </button>

</div>