问题描述
嘿，我想知道是否有人可以帮助我确定为什么我的通过className更改样式显示的功能不起作用，但该功能对具有ID的人有效，但对于使用类却不起作用？
还想知道是否可以使用仅JavaScript将按钮类onclick从btn-red更改为btn-green？
window.toggleDisplayByID = function(id) { var e = document.getElementById(id); if (e.style.display == null || e.style.display == "none") { e.style.display = "block"; } else { e.style.display = "none"; } } window.toggleDisplayByClass = function(className) { var c = document.getElementsByClassName(className); if (c.style.display == null || c.style.display == "none") { c.style.display = "block"; } else { c.style.display = "none"; } }
.btn { display: inline-block; height: 40px; line-height: 40px; padding: 0 20px; background: #444; color: #eee; border: 0; font-size: 14px; vertical-align: top; text-align: center; text-decoration: none; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); border-radius: 4px; transition: all 0.15s ease-in-out; } .btn:hover, .btn:active { background-color: #555; color: #fff; } .btn-green { background-color: #47950d; } .btn-green:hover, .btn-green:active { background-color: #64b820; } .btn-red { background-color: #b3353c; } .btn-red:hover, .btn-red:active { background-color: #cb575b; }
<button id="display1" class="btn btn-red" onclick="toggleDisplayByID('hud-popup-overlay')">Toggle div 1</button> <button id="display2" class="btn btn-red" onclick="toggleDisplayByID('hud-leaderboard')">Toggle div 2</button> <button id="display3" class="btn btn-red" onclick="toggleDisplayByClass('hud-bottom-righ')">Toggle div 3</button> <button id="display4" class="btn btn-red" onclick="toggleDisplayByClass('hud-bottom-left')">Toggle div 4</button> <div id="hud-popup-overlay"> <p> Something Here 1 </p> </div> <div id="hud-leaderboard"> <p> Something Here 2 </p> </div> <div class="hud-bottom-righ"> <p> Something Here 3 </p> </div> <div class="hud-bottom-left"> <p> Something Here 4 </p> </div>
1楼
BlackICE
2
2019-03-03 02:10:07
返回类似数组的对象，因此您必须为其编制索引。
window.toggleDisplayByID = function(id) {
var e = document.getElementById(id);
if (e.style.display == null || e.style.display == "none") {
e.style.display = "block";
} else {
e.style.display = "none";
}
}
window.toggleDisplayByClass = function(className) {
var c = document.getElementsByClassName(className);
c.forEach(function(x) {
if (x.style.display == null || x.style.display == "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
}
2楼
Davide Vitali
2
2019-03-03 02:10:55
至于第一个问题，它不起作用，因为getElementsByClassName返回一个元素数组，因此您必须遍历它们。
3楼
Miroslav Glamuzina
2
已采纳
2019-03-03 02:12:07
两件事情：
- 您第四个元素的类名在HTML中不正确
- 第二个函数中有一个未定义的变量
当您使用getElementsByClassName()时，您无需处理单个元素。
循环浏览列表并设置样式。
我更改了toggleDisplayById和toggleDisplayByClass参数，以便它可以包含按钮的元素ID。 在每个函数中，它们通过以下方式获取button元素：
var b = document.getElementById(btnId);
另外，我创建了一个辅助函数，用于删除和添加样式：
function removeAndAddClass(element,removeClass,addClass){
element.classList.remove(removeClass);
element.classList.add(addClass);
}
window.toggleDisplayByID = function(btnId,id) { var e = document.getElementById(id); var b = document.getElementById(btnId); if (e.style.display == null || e.style.display == "none") { e.style.display = "block"; removeAndAddClass(b,'btn-green','btn-red'); } else { e.style.display = "none"; removeAndAddClass(b,'btn-red','btn-green'); } } window.toggleDisplayByClass = function(btnId,className) { var c2 = Array.from(document.getElementsByClassName(className)); var b = document.getElementById(btnId); if(b.classList.contains('btn-red')){ removeAndAddClass(b,'btn-red','btn-green'); }else{ removeAndAddClass(b,'btn-green','btn-red'); } c2.forEach(c => { if (c.style.display == null || c.style.display == "none") { c.style.display = "block"; } else { c.style.display = "none"; } }); } function removeAndAddClass(element,removeClass,addClass){ element.classList.remove(removeClass); element.classList.add(addClass); }
.btn { display: inline-block; height: 40px; line-height: 40px; padding: 0 20px; background: #444; color: #eee; border: 0; font-size: 14px; vertical-align: top; text-align: center; text-decoration: none; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); border-radius: 4px; transition: all 0.15s ease-in-out; } .btn:hover, .btn:active { background-color: #555; color: #fff; } .btn-green { background-color: #47950d; } .btn-green:hover, .btn-green:active { background-color: #64b820; } .btn-red { background-color: #b3353c; } .btn-red:hover, .btn-red:active { background-color: #cb575b; }
<button id="display1" class="btn btn-red" onclick="toggleDisplayByID('display1','hud-popup-overlay')">Toggle div 1</button> <button id="display2" class="btn btn-red" onclick="toggleDisplayByID('display2','hud-leaderboard')">Toggle div 2</button> <button id="display3" class="btn btn-red" onclick="toggleDisplayByClass('display3','hud-bottom-righ')">Toggle div 3</button> <button id="display4" class="btn btn-red" onclick="toggleDisplayByClass('display4','hud-bottom-left')">Toggle div 4</button> <div id="hud-popup-overlay"> <p> Something Here 1 </p> </div> <div id="hud-leaderboard"> <p> Something Here 2 </p> </div> <div class="hud-bottom-righ"> <p> Something Here 3 </p> </div> <div class="hud-bottom-left"> <p> Something Here 4 </p> </div>
希望这可以帮助，