倒计时只对第一个按钮有效，但对其他按钮无效

Question

我需要你的帮助。我有一个带倒计时的下载按钮，但按钮有问题。它只在第一个按钮上工作，或者如果首先单击第二个按钮，则从第一个按钮而不是第二个开始。请帮我纠正这个错误。我已经创建了一个代码片段。请复习一下，让我知道怎么了！非常感谢。

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>

Answer 1

试试这个

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>

Answer 2

一种方法是使用this.id传递按钮的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()函数。此外，每个<a>标签都必须有一些iddownloadingx，您可以分别为每个downloadingx-btn-download-1和downloadingx-btn-download-2有这样的id。

问题是，页面上的不同元素不能有相同的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>

Answer 3

您真的应该在JavaScript中注册事件侦听器。这样做将允许您在generate中使用this来引用事件侦听器绑定到的元素。

从那里，使用nextElementSibling来定位适当的锚点(<a>(是微不足道的。

还有一个额外的好处，如果你有一个大列表(我去掉了它们(，你不需要为按钮和锚元素想出不同的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>

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

Answer 4

我发现了你的错误。第一个下载按钮和第二个按钮的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>