我正在尝试使用切换按钮来更改消息,但不幸的是,如果您一直按它,它就不起作用。
这是我的 HTML 代码:
toggled = true;
togBtn.onclick = function() {
var text = "SELL"
if (!toggled) {
document.getElementById("test1").style.display = "none";
toggled = true;
}
if (toggled) {
document.getElementById("test1").innerHTML = text;
toggled = false;
}
};
#newsletter {
color: #ffffff;
background: #1d3030;
height: 60px;
}
#newsletter h1 {
float: left;
padding-left: 600px;
}
#newsletter form {
float: right;
}
.switch {
position: relative;
display: inline-block;
width: 115px;
height: 34px;
}
.switch input {
display: none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #e8491d;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: #2196F3;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(80px);
-ms-transform: translateX(80px);
transform: translateX(80px);
}
.on {
display: none;
}
.on,
.off {
color: white;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
font-size: 10px;
}
input:checked+.slider .on {
display: block;
}
input:checked+.slider .off {
display: none;
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<body>
<section id="newsletter">
<div class="container">
<h1 id="test1">BUY</h1>
<form method="post" action="">
<label class="switch">
<input type="checkbox" id="togBtn" class="togBtn">
<div class="slider round">
<span class="on" name="on" id="on">SELL</span>
<span class="off" name="off" id="off">BUY</span>
</div>
</label>
</form>
</div>
<div class="box">
</div>
</section>
</body>
我添加了变量 toggled 以用于更改 HTML 中的名称。 该按钮仅适用于两次点击,之后,它就不再起作用了。
最佳答案
这比你做的要简单得多。不需要两个 span
元素,然后切换每个元素的 display
。只需使用一个 span
并根据当前文本更新其文本。
此外,您的 HTML 无效。您错误地使用了 label
元素。
var btn = document.querySelector(".slider.round");
var output = document.querySelector(".onOff");
var test1 = document.getElementById("test1");
btn.addEventListener("click", function () {
var text = (output.textContent === "Buy") ? "Sell" : "Buy";
output.textContent = text;
test1.textContent = text;
});
#newsletter {
color: #ffffff;
background: #1d3030;
height: 60px;
}
#newsletter h1 {
float: left;
padding-left: 600px;
}
#newsletter form {
float: right;
}
.switch {
position: relative;
display: inline-block;
width: 115px;
height: 34px;
}
.switch input {
display: none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #e8491d;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(80px);
-ms-transform: translateX(80px);
transform: translateX(80px);
}
.onOff {
color: white;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
font-size: 10px;
}
input:checked + .slider .on {
display: block;
}
input:checked + .slider .off {
display: none;
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<section id="newsletter">
<div class="container">
<h1 id="test1">BUY</h1>
<form method="post" action="">
<!-- You shouldn't use a label here -->
<div class="switch">
<input type="checkbox" id="togBtn" class="togBtn">
<div class="slider round">
<span class="onOff" name="onOff">Buy</span>
</div>
</div>
</form>
</div>
<div class="box"></div>
</section>
关于javascript - 如何让 Toggle button JS 继续工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47188661/