我有一个将变量加 1 的按钮，但我想在用户单击它后隐藏该按钮以阻止他们添加多个。该按钮要么不隐藏，要么不添加。请帮忙。我尝试了一些东西，但没有任何效果，它是同样的问题，一个或另一个都有效，但从来没有。<!DOCTYPE html><html><head> <script type="text/javascript"></script> <script> var num = 1; window.addEventListener("load", function() { // on page loade document.getElementById("join").addEventListener("click", function(event) { num++; show() }) show(); // first time }) const pad = (num, howMany, what) => (Array(howMany).join(what) + num).slice(-howMany); function show() { document.getElementById('followers').innerHTML = pad(num, 10, "0") } </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function(){ $(".btn1").click(function(){ $(this).hide(); }); }); </script></head><body> <div class="counter-wrap"> <div id="followers" class="counter">0,000</div> <div class="measure-wrap"> <span class="text-uppercase letter-spacing" style="top: 4px;">People</span> </div></div><div id="idid">TEst<p>This is a paragraph.</p></div><button id="btn" class="button button2 btn1">Hide</button></body><style type="text/css"> .button { opacity: 1; display: block; margin-left: auto; margin-right: auto; width: 25%; border-radius: 30px; text-align: center; text-decoration: none; background-color: #1D1D1D; border: none; color: white; padding: 15px 42px; font-size: 25px; cursor: pointer; outline: none; }.button2 { box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19); }.button:active { background-color: #080808; box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19); transform: translateY(4px); }
1 回答
慕姐8265434
TA贡献1813条经验 获得超2个赞
您没有选择页面上的元素。使用该querySelector方法，您可以选择与您提供的选择器匹配的第一个元素。
$(document).ready(function() {
$(".btn1").click(function() {
$(this).hide();
});
});
var num = 1;
window.addEventListener("load", function() { // on page loade
document.querySelector(".btn1").addEventListener("click", function(event) {
num++;
show()
})
show(); // first time
})
const pad = (num, howMany, what) => (Array(howMany).join(what) + num).slice(-howMany);
function show() {
document.getElementById('followers').innerHTML = pad(num, 10, "0")
}
.button {
opacity: 1;
display: block;
margin-left: auto;
margin-right: auto;
width: 25%;
border-radius: 30px;
text-align: center;
text-decoration: none;
background-color: #1D1D1D;
border: none;
color: white;
padding: 15px 42px;
font-size: 25px;
cursor: pointer;
outline: none;
}
.button2 {
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
.button:active {
background-color: #080808;
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
transform: translateY(4px);
}
.counter-wrap {
text-align: center;
padding: .75rem 2rem 1.25rem;
display: inline-block;
margin: 0 auto;
background: url(../images/counter-starburst-blue.svg);
background-position: top center;
background-repeat: no-repeat;
background-size: 70px auto;
width: 100%;
}
*,
::after,
::before {
box-sizing: border-box;
}
.letter-spacing {
letter-spacing: 2px;
}
.text-uppercase {
text-transform: uppercase!important;
font-family: Montserrat, sans-serif;
color: #4d4f54;
}
.counter {
display: inline-block;
margin: 1.25rem .75rem .25rem .75rem;
font-size: 2rem;
line-height: .875;
font-weight: 900;
color: #273654;
}
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="counter-wrap">
<div id="followers" class="counter">0,000</div>
<div class="measure-wrap">
<span class="text-uppercase letter-spacing" style="top: 4px;">People</span>
</div>
</div>
<div id="idid">
TEst
<p>This is a paragraph.</p>
</div>
<button id="btn" class="button button2 btn1">Hide</button>
</body>
</html>
添加回答
举报
0/150
提交
取消