Javascript 隐藏具有相同类名的所有元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11254429/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hiding all elements with the same class name?
提问by user1489970
I'm trying to hide elements with the same class name (float_form), but I'm also trying to use the script below to show them (all of the float_form class divs are initially hidden). I've looked at a lot of jquery solutions, but I can't seem to make any of them work for this.
我试图隐藏具有相同类名 (float_form) 的元素，但我也试图使用下面的脚本来显示它们（所有 float_form 类 div 最初都是隐藏的）。我看过很多 jquery 解决方案，但我似乎无法让它们中的任何一个为此工作。
function show(a) {
var e = document.getElementById(a);
if (!e)
return true;
if (e.style.display == "none") {
e.style.display = "block"
} else {
e.style.display = "none"
}
return true;
}
?
Edit:Sorry if it wasn't clear, I do not intend to use Jquery(and I know that this is not jquery). I am looking for a way to use javascript to recognize repeated classnames that are not in style= display:none; without compromising the show/hide ID element since there is a loop with the div id as the key. The html for the div looks like below, with {item.ID} being a while loop.
编辑：对不起，如果不清楚，我不打算使用 Jquery（我知道这不是 jquery）。我正在寻找一种使用 javascript 来识别不在 style= display:none; 中的重复类名的方法。不会影响显示/隐藏 ID 元素，因为有一个以 div id 作为键的循环。div 的 html 如下所示，其中 {item.ID} 是一个 while 循环。
<div class="float_form" id="{item.ID}" style="display: none;">
回答by gdoron is supporting Monica
vanilla javascript
香草javascript
function toggle(className, displayState){
var elements = document.getElementsByClassName(className)
for (var i = 0; i < elements.length; i++){
elements[i].style.display = displayState;
}
}
toggle('float_form', 'block'); // Shows
toggle('float_form', 'none'); // hides
jQuery:
jQuery：
$('.float_form').show(); // Shows
$('.float_form').hide(); // hides
回答by 0x499602D2
If you're looking into jQuery, then it's good to know that you can use a class selector inside the parameters of $and call the method .hide().
如果您正在研究 jQuery，那么很高兴知道您可以在 的参数中使用类选择器$并调用方法.hide()。
$('.myClass').hide(); // all elements with the class myClass will hide.
But if it's a toggle you're looking for, use .toggle();
但如果它是您正在寻找的切换，请使用 .toggle();
But here's my take on a good toggle withoutusing jQuery:
但这是我在不使用 jQuery 的情况下进行良好切换的看法：
function toggle( selector ) {
var nodes = document.querySelectorAll( selector ),
node,
styleProperty = function(a, b) {
return window.getComputedStyle ? window.getComputedStyle(a).getPropertyValue(b) : a.currentStyle[b];
};
[].forEach.call(nodes, function( a, b ) {
node = a;
node.style.display = styleProperty(node, 'display') === 'block' ? 'none' : 'block';
});
}
toggle( '.myClass' );
Demo here (Click "Render" to run): http://jsbin.com/ofusad/2/edit#javascript,html
演示在这里（点击“渲染”运行）：http: //jsbin.com/ofusad/2/edit#javascript,html
回答by Bhaskara Arani
Using jquery
使用jQuery
$(".float_form").each(function(){
if($(this).css("display") == "none"){
$(this).show();
}else{
$(this).hide();
}
});
回答by jasonleonhard
No jQuery needed
不需要jQuery
const toggleNone = className => {
let elements = document.getElementsByClassName(className)
for (let i = 0; i < elements.length; i++){
if (elements[i].style.display === "none") {
elements[i].style.display = "";
} else {
elements[i].style.display = "none";
}
}
}
const toggleVisibility = className => {
let elements = document.getElementsByClassName(className)
for (let i = 0; i < elements.length; i++){
let elements = document.getElementsByClassName(className);
if (elements[i].style.visibility === "hidden") {
elements[i].style.visibility = "";
} else {
elements[i].style.visibility = "hidden";
}
}
}
// run
toggleNone('your-class-name-here'); // toggles remove
// or run
toggleVisibility('your-class-name-here'); // toggles hide
Answer provided in ES6 syntax but easily can be converted to ES5 if you wish
答案以 ES6 语法提供，但如果您愿意，可以轻松转换为 ES5
回答by mgraph
Try :
尝试 ：
function showClass(a){
var e = [];
var e = getElementsByClassName(a);
for(i in e ){
if(!e[i])return true;
if(e[i].style.display=="none"){
e[i].style.display="block"
} else {
e[i].style.display="none"
}
}
return true;
}
demo: showClass("float_form");
演示：showClass("float_form");
