3

我需要你的帮助。我有一个带倒计时的下载按钮，但该按钮有问题。它仅适用于第一个按钮，或者如果首先单击第二个按钮，则从第一个按钮而不是第二个按钮开始。请帮我解决这个错误。我用编码创建了一个片段。请检查它并告诉我，有什么问题！谢谢你。

  function generate() {
    var e, n = document.getElementById("downloadingx"),
      t = document.getElementById("downloadbuttonx"),
      a = document.getElementById("downloadingx").href,
      l = 10,
      d = document.createElement("span");
    n.parentNode.replaceChild(d, n), e = setInterval(function() {
      --l < 0 ? (d.parentNode.replaceChild(n, d), clearInterval(e), window.open(a), n.style.display = "inline") : (d.innerHTML = "<i class='fa fa-clock-o' aria-hidden='true'/> Redirecting to download page in " + l.toString() + " seconds.", t.style.display = "none")
    }, 1e3)
  }
#downloadbuttonx{
  cursor: pointer;
  padding: 10px 20px;
  border: none;
  border-radius: 3px;
  background: #fff;
  color: #e67e22;
  float: none;
  text-transform: uppercase;
  font-weight: 800;
  transition: all 0.5s;
  font-size: 16px;
  outline: none;
}

#downloadbuttonx:hover,
#downloadingx:hover{
  background: #ffffff;
  color: #b62727;
  outline: none;
}

.batas-downx{
  margin: auto;
  border-radius: 4px;
  display:block;
}

.background-box-st{
  background: #b62727;
  color: #fff;
  padding: 10px 10px 5px 10px;
  width: 310px;
  text-align: center;
  left: 50%;
  transform: translate(-50%);
  position: relative;
  border-top-right-radius:5px;
  border-top-left-radius:5px;
  border-bottom-right-radius:5px;
  border-bottom-left-radius:5px;
  line-height: 80px;
  margin-bottom: 10px;
}

.background-box-n{
  background: #a30085;
  color: #fff;
  padding: 10px 10px 5px 10px;
  width: 310px;
  text-align: center;
  left: 50%;
  transform: translate(-50%);
  position: relative;
  border-top-right-radius:5px;
  border-top-left-radius:5px;
  border-bottom-right-radius:5px;
  border-bottom-left-radius:5px;
  line-height: 80px;
  margin-bottom: 10px;
}

.file-name{
  font-family: sans-serif;
  font-size: 1.3em;
  font-weight: 700;
  color: #fff;
  line-height: 35px;
  text-align: center;
  display: block;
  margin: 5px;
}

.catatan-downx{
padding:20px;
background:#f7f7f7;
color:#555;
font-size:20px;
}

#downloadingx{
  display:block;
  padding: 10px 20px;
  border-radius: 3px;
  color: #e67e22;
  background: #fff;
  text-decoration: none;
  text-transform:capitalize;
  text-align:center;
  float:none;
  line-height:80px;
  font-size:16px;
  font-weight: 600;
}

.bungkus-info span{
display:block;
line-height:80px;
float:none;
}

.file-deskripsi{
display:block;
}

.file-deskripsi span{
margin-right:3px;
}

#downloadbuttonx,
a#downloadingx{
width:160px;
padding:15px;
cursor:pointer;
}

.bungkus-info span{
float:none;
width:100%;
text-align:center;
}

.file-deskripsi{text-align:center}
}
<div class="batas-downx">
  <div class="background-box-n">
    <div class="bungkus-info">
      <div class="file-name">File 1</div>
      <button id="downloadbuttonx" onclick="generate()"><i aria-hidden="true" class="fa fa-cloud-download"></i> Download</button>
      <a href="#" id="downloadingx" style="display: none;"><i aria-hidden="true" class="fa fa-cloud-download"></i> Redirecting...</a>
    </div>
  </div>
</div>
<br>
<div class="batas-downx">
  <div class="background-box-st">
    <div class="bungkus-info">
      <div class="file-name">File 1</div>
      <button id="downloadbuttonx" onclick="generate()"><i aria-hidden="true" class="fa fa-cloud-download"></i> Download</button>
      <a href="#" id="downloadingx" style="display: none;"><i aria-hidden="true" class="fa fa-cloud-download"></i> Redirecting...</a>
    </div>
  </div>
</div>

4

4 回答 4

2

你真的应该在 JavaScript 中注册你的事件监听器。这样做将使您可以使用thisinsidegenerate来引用事件侦听器绑定到的元素。

从那里可以很容易地<a>使用nextElementSibling.

还有一个额外的好处是，如果您有一个大列表，您不需要为按钮和锚元素提供不同的 ID（我摆脱了它们。）

(function() {

  function generate() {
    var e, n = this.nextElementSibling,
      t = this,
      a = this.nextElementSibling.href,
      l = 10,
      d = document.createElement("span");
    n.parentNode.replaceChild(d, n), e = setInterval(function() {
      --l < 0 ? (d.parentNode.replaceChild(n, d), clearInterval(e), window.open(a), n.style.display = "inline") : (d.innerHTML = "<i class='fa fa-clock-o' aria-hidden='true'/> Redirecting to download page in " + l.toString() + " seconds.", t.style.display = "none")
    }, 1e3)
  }

  const buttons = document.getElementsByTagName('button');

  for (let i = 0; i < buttons.length; i++) {
    const button = buttons[i];
    button.addEventListener('click', generate);
  }

})();
.downloadbuttonx {
  cursor: pointer;
  padding: 10px 20px;
  border: none;
  border-radius: 3px;
  background: #fff;
  color: #e67e22;
  float: none;
  text-transform: uppercase;
  font-weight: 800;
  transition: all 0.5s;
  font-size: 16px;
  outline: none;
}

.downloadbuttonx:hover,
.downloadingx:hover {
  background: #ffffff;
  color: #b62727;
  outline: none;
}

.batas-downx {
  margin: auto;
  border-radius: 4px;
  display: block;
}

.background-box-st {
  background: #b62727;
  color: #fff;
  padding: 10px 10px 5px 10px;
  width: 310px;
  text-align: center;
  left: 50%;
  transform: translate(-50%);
  position: relative;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  line-height: 80px;
  margin-bottom: 10px;
}

.background-box-n {
  background: #a30085;
  color: #fff;
  padding: 10px 10px 5px 10px;
  width: 310px;
  text-align: center;
  left: 50%;
  transform: translate(-50%);
  position: relative;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  line-height: 80px;
  margin-bottom: 10px;
}

.file-name {
  font-family: sans-serif;
  font-size: 1.3em;
  font-weight: 700;
  color: #fff;
  line-height: 35px;
  text-align: center;
  display: block;
  margin: 5px;
}

.catatan-downx {
  padding: 20px;
  background: #f7f7f7;
  color: #555;
  font-size: 20px;
}

.downloadingx {
  display: block;
  padding: 10px 20px;
  border-radius: 3px;
  color: #e67e22;
  background: #fff;
  text-decoration: none;
  text-transform: capitalize;
  text-align: center;
  float: none;
  line-height: 80px;
  font-size: 16px;
  font-weight: 600;
}

.bungkus-info span {
  display: block;
  line-height: 80px;
  float: none;
}

.file-deskripsi {
  display: block;
}

.file-deskripsi span {
  margin-right: 3px;
}

.downloadbuttonx,
a.downloadingx {
  width: 160px;
  padding: 15px;
  cursor: pointer;
}

.bungkus-info span {
  float: none;
  width: 100%;
  text-align: center;
}

.file-deskripsi {
  text-align: center
}
<div class="batas-downx">
  <div class="background-box-n">
    <div class="bungkus-info">
      <div class="file-name">File 1</div>
      <button class="downloadbuttonx"><i aria-hidden="true" class="fa fa-cloud-download"></i> Download</button>
      <a href="#" class="downloadingx" style="display: none;"><i aria-hidden="true" class="fa fa-cloud-download"></i> Redirecting...</a>
    </div>
  </div>
</div>
<br>
<div class="batas-downx">
  <div class="background-box-st">
    <div class="bungkus-info">
      <div class="file-name">File 2</div>
      <button class="downloadbuttonx"><i aria-hidden="true" class="fa fa-cloud-download"></i> Download</button>
      <a href="#" class="downloadingx" style="display: none;"><i aria-hidden="true" class="fa fa-cloud-download"></i> Redirecting...</a>
    </div>
  </div>
</div>

更新通过使用 CSS 类来重新启用样式而不使用重复的 ID。

于 2020-12-23T12:12:08.380 回答
2

尝试这个

function generate(buttonId,hrefId) {
    var e, n = document.getElementById(hrefId),
      t = document.getElementById(buttonId),
      a = document.getElementById(hrefId).href,
      l = 10,
      d = document.createElement("span");
    n.parentNode.replaceChild(d, n), e = setInterval(function() {
      --l < 0 ? (d.parentNode.replaceChild(n, d), clearInterval(e), window.open(a), n.style.display = "inline") : (d.innerHTML = "<i class='fa fa-clock-o' aria-hidden='true'/> Redirecting to download page in " + l.toString() + " seconds.", t.style.display = "none")
    }, 1e3)
  }


<div class="batas-downx">
      <div class="background-box-n">
        <div class="bungkus-info">
          <div class="file-name">File 1</div>
          <button id="downloadbuttonx0" onclick="generate('downloadbuttonx0','downloadingx0')"><i aria-hidden="true" class="fa fa-cloud-download"></i> Download</button>
          <a href="#" id="downloadingx0" style="display: none;"><i aria-hidden="true" class="fa fa-cloud-download"></i> Redirecting...</a>
        </div>
      </div>
    </div>
    <br>
    <div class="batas-downx">
      <div class="background-box-st">
        <div class="bungkus-info">
          <div class="file-name">File 1</div>
          <button id="downloadbuttonx1" onclick="generate('downloadbuttonx1','downloadingx1')"><i aria-hidden="true" class="fa fa-cloud-download"></i> Download</button>
          <a href="#" id="downloadingx1" style="display: none;"><i aria-hidden="true" class="fa fa-cloud-download"></i> Redirecting...</a>
        </div>
      </div>
    </div>
于 2020-12-23T12:04:57.087 回答
2

一种方法是使用 传递按钮的IDthis.id，然后使用该 ID 来获取单击了哪个按钮。

请参见下面的示例。

function generate(idOfButtonClicked){
 console.log("ID is: ", idOfButtonClicked)
}
<button id="btn-1" onclick="generate(this.id)"> Click Me</button>
<br />

<button id="btn-2" onclick="generate(this.id)"> Click Me</button>

现在进入您的代码，您可以将id作为参数传递给generate()函数。此外，每个标签都必须有一些 id downloadingx，<a>你可以有这样的东西作为每个标签的 iddownloadingx-btn-download-1和downloadingx-btn-download-2分别。

问题是页面上的不同元素不能具有相同的 ID。 

  function generate(btnId) {
    var e, n = document.getElementById(btnId),
      t = document.getElementById(btnId),
      a = document.getElementById("downloadingx-"+btnId).href,
      l = 10,
      d = document.createElement("span");
    n.parentNode.replaceChild(d, n), e = setInterval(function() {
      --l < 0 ? (d.parentNode.replaceChild(n, d), clearInterval(e), window.open(a), n.style.display = "inline") : (d.innerHTML = "<i class='fa fa-clock-o' aria-hidden='true'/> Redirecting to download page in " + l.toString() + " seconds.", t.style.display = "none")
    }, 1e3)
  }
#downloadbuttonx{
  cursor: pointer;
  padding: 10px 20px;
  border: none;
  border-radius: 3px;
  background: #fff;
  color: #e67e22;
  float: none;
  text-transform: uppercase;
  font-weight: 800;
  transition: all 0.5s;
  font-size: 16px;
  outline: none;
}

#downloadbuttonx:hover,
#downloadingx:hover{
  background: #ffffff;
  color: #b62727;
  outline: none;
}

.batas-downx{
  margin: auto;
  border-radius: 4px;
  display:block;
}

.background-box-st{
  background: #b62727;
  color: #fff;
  padding: 10px 10px 5px 10px;
  width: 310px;
  text-align: center;
  left: 50%;
  transform: translate(-50%);
  position: relative;
  border-top-right-radius:5px;
  border-top-left-radius:5px;
  border-bottom-right-radius:5px;
  border-bottom-left-radius:5px;
  line-height: 80px;
  margin-bottom: 10px;
}

.background-box-n{
  background: #a30085;
  color: #fff;
  padding: 10px 10px 5px 10px;
  width: 310px;
  text-align: center;
  left: 50%;
  transform: translate(-50%);
  position: relative;
  border-top-right-radius:5px;
  border-top-left-radius:5px;
  border-bottom-right-radius:5px;
  border-bottom-left-radius:5px;
  line-height: 80px;
  margin-bottom: 10px;
}

.file-name{
  font-family: sans-serif;
  font-size: 1.3em;
  font-weight: 700;
  color: #fff;
  line-height: 35px;
  text-align: center;
  display: block;
  margin: 5px;
}

.catatan-downx{
padding:20px;
background:#f7f7f7;
color:#555;
font-size:20px;
}

#downloadingx{
  display:block;
  padding: 10px 20px;
  border-radius: 3px;
  color: #e67e22;
  background: #fff;
  text-decoration: none;
  text-transform:capitalize;
  text-align:center;
  float:none;
  line-height:80px;
  font-size:16px;
  font-weight: 600;
}

.bungkus-info span{
display:block;
line-height:80px;
float:none;
}

.file-deskripsi{
display:block;
}

.file-deskripsi span{
margin-right:3px;
}

#downloadbuttonx,
a#downloadingx{
width:160px;
padding:15px;
cursor:pointer;
}

.bungkus-info span{
float:none;
width:100%;
text-align:center;
}

.file-deskripsi{text-align:center}
}
<div class="batas-downx">
  <div class="background-box-n">
    <div class="bungkus-info">
      <div class="file-name">File 1</div>
      <button id="btn-download-1" onclick="generate(this.id)"><i aria-hidden="true" class="fa fa-cloud-download"></i> Download</button>
      <a href="#" id="downloadingx-btn-download-1" style="display: none;"><i aria-hidden="true" class="fa fa-cloud-download"></i> Redirecting...</a>
    </div>
  </div>
</div>
<br>
<div class="batas-downx">
  <div class="background-box-st">
    <div class="bungkus-info">
      <div class="file-name">File 2</div>
      <button id="btn-download-2" onclick="generate(this.id)"><i aria-hidden="true" class="fa fa-cloud-download"></i> Download</button>
      <a href="#" id="downloadingx-btn-download-2" style="display: none;"><i aria-hidden="true" class="fa fa-cloud-download"></i> Redirecting...</a>
    </div>
  </div>
</div>

于 2020-12-23T11:58:00.297 回答
0

我发现了你的错误。这是第一个下载按钮和第二个具有相同的 id。我通过更改第二个的 id 来解决。

function generatex() {
var e, n = document.getElementById("downloadingx"),
  t = document.getElementById("downloadbuttonx"),
  a = document.getElementById("downloadingx").href,
  l = 10,
  d = document.createElement("span");
n.parentNode.replaceChild(d, n), e = setInterval(function() {
  --l < 0 ? (d.parentNode.replaceChild(n, d), clearInterval(e), window.open(a), n.style.display = "inline") : (d.innerHTML = "<i class='fa fa-clock-o' aria-hidden='true'/> Redirecting to download page in " + l.toString() + " seconds.", t.style.display = "none")
}, 1e3)
}
function generatey() {
var e, n = document.getElementById("downloadingy"),
  t = document.getElementById("downloadbuttony"),
  a = document.getElementById("downloadingy").href,
  l = 10,
  d = document.createElement("span");
n.parentNode.replaceChild(d, n), e = setInterval(function() {
  --l < 0 ? (d.parentNode.replaceChild(n, d), clearInterval(e), window.open(a), n.style.display = "inline") : (d.innerHTML = "<i class='fa fa-clock-o' aria-hidden='true'/> Redirecting to download page in " + l.toString() + " seconds.", t.style.display = "none")
}, 1e3)
}

css

#downloadbuttonx{
  cursor: pointer;
  padding: 10px 20px;
  border: none;
  border-radius: 3px;
  background: #fff;
  color: #e67e22;
  float: none;
  text-transform: uppercase;
  font-weight: 800;
  transition: all 0.5s;
  font-size: 16px;
  outline: none;
}
#downloadbuttony{
  cursor: pointer;
  padding: 10px 20px;
  border: none;
  border-radius: 3px;
  background: #fff;
  color: #e67e22;
  float: none;
  text-transform: uppercase;
  font-weight: 800;
  transition: all 0.5s;
  font-size: 16px;
  outline: none;
}

#downloadbuttonx:hover,
#downloadingx:hover{
  background: #ffffff;
  color: #b62727;
  outline: none;
}
#downloadbuttony:hover,
#downloadingy:hover{
  background: #ffffff;
  color: #b62727;
  outline: none;
}
.batas-downx{
  margin: auto;
  border-radius: 4px;
  display:block;
}
.batas-downy{
  margin: auto;
  border-radius: 4px;
  display:block;
}

.background-box-st{
  background: #b62727;
  color: #fff;
  padding: 10px 10px 5px 10px;
  width: 310px;
  text-align: center;
  left: 50%;
  transform: translate(-50%);
  position: relative;
  border-top-right-radius:5px;
  border-top-left-radius:5px;
  border-bottom-right-radius:5px;
  border-bottom-left-radius:5px;
  line-height: 80px;
  margin-bottom: 10px;
}

.background-box-n{
  background: #a30085;
  color: #fff;
  padding: 10px 10px 5px 10px;
  width: 310px;
  text-align: center;
  left: 50%;
  transform: translate(-50%);
  position: relative;
  border-top-right-radius:5px;
  border-top-left-radius:5px;
  border-bottom-right-radius:5px;
  border-bottom-left-radius:5px;
  line-height: 80px;
  margin-bottom: 10px;
}

.file-name{
  font-family: sans-serif;
  font-size: 1.3em;
  font-weight: 700;
  color: #fff;
  line-height: 35px;
  text-align: center;
  display: block;
  margin: 5px;
}

.catatan-downx{
padding:20px;
background:#f7f7f7;
color:#555;
font-size:20px;
}
.catatan-downy{
padding:20px;
background:#f7f7f7;
color:#555;
font-size:20px;
}

#downloadingx{
  display:block;
  padding: 10px 20px;
  border-radius: 3px;
  color: #e67e22;
  background: #fff;
  text-decoration: none;
  text-transform:capitalize;
  text-align:center;
  float:none;
  line-height:80px;
  font-size:16px;
  font-weight: 600;
}
#downloadingy{
  display:block;
  padding: 10px 20px;
  border-radius: 3px;
  color: #e67e22;
  background: #fff;
  text-decoration: none;
  text-transform:capitalize;
  text-align:center;
  float:none;
  line-height:80px;
  font-size:16px;
  font-weight: 600;
}


.bungkus-info span{
display:block;
line-height:80px;
float:none;
}

.file-deskripsi{
display:block;
}

.file-deskripsi span{
margin-right:3px;
}

#downloadbuttonx,
#downloadbuttony,
a#downloadingx,
a#downloadingy{
width:160px;
padding:15px;
cursor:pointer;
}

.bungkus-info span{
float:none;
width:100%;
text-align:center;
}

.file-deskripsi{text-align:center}
}

html

<div class="batas-downx">
    <div class="background-box-n">
        <div class="bungkus-info">
            <div class="file-name">File 1</div>
            <button id="downloadbuttonx" onclick="generatex()"><i aria-hidden="true" class="fa fa-cloud-download"></i> Download</button>
            <a href="#" id="downloadingx" style="display: none;"><i aria-hidden="true" class="fa fa-cloud-download"></i> Redirecting...</a>
        </div>
    </div>
</div>
<br>
<div class="batas-downx">
    <div class="background-box-st">
        <div class="bungkus-info">
            <div class="file-name">File 1</div>
            <button id="downloadbuttony" onclick="generatey()"><i aria-hidden="true" class="fa fa-cloud-download"></i> Download</button>
            <a href="#" id="downloadingy" style="display: none;"><i aria-hidden="true" class="fa fa-cloud-download"></i> Redirecting...</a>
        </div>
    </div>
</div>
于 2020-12-23T12:09:04.000 回答