隐藏具有相同类名的所有元素
Hiding all elements with the same class name?
我试图隐藏具有相同类名(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;
}
编辑:对不起,如果不清楚,我不打算使用Jquery(我知道这不是jquery)。我正在寻找一种使用 javascript 来识别不在 style= display:none 中的重复类名的方法;不影响显示/隐藏 ID 元素,因为有一个以div id 作为键的循环。div 的 html 如下所示,{item.ID} 是一个 while 循环。
<div class="float_form" id="{item.ID}" style="display: none;">
vanilla 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
j查询:
$('.float_form').show(); // Shows
$('.float_form').hide(); // hides
如果你正在研究jQuery,那么很高兴知道你可以在$
的参数中使用类选择器,并将该方法调用.hide()
。
$('.myClass').hide(); // all elements with the class myClass will hide.
但是,如果这是您要查找的切换开关,请使用.toggle();
但这是我对不使用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' );
演示在这里(单击"渲染"运行): http://jsbin.com/ofusad/2/edit#javascript,html
使用 jquery
$(".float_form").each(function(){
if($(this).css("display") == "none"){
$(this).show();
}else{
$(this).hide();
}
});
不需要 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
答案以 ES6 语法提供,但如果您愿意,可以轻松转换为 ES5
尝试:
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;
}
演示 : showClass("float_form");
相关文章:
- 具有相同类的jquery-click元素
- 使用jQuery创建具有不同类名或ID的多个元素
- 对具有相同类级别的不同li元素进行排序
- 计算具有相同类的元素的数量-jquery
- 显示/隐藏具有不同类的li元素
- 谷歌自动完成无法处理具有相同类名的多个元素
- 是什么阻止querySelectorAll处理此代码中具有相同类的所有元素
- Internet Explorer CSS类样式没有'如果存在具有相同类名的其他元素,则不适用
- 对于具有相同类的多个元素,只影响jquery中单击的元素
- 使用 .each 循环遍历 Backbone View 中具有相同类的元素
- 隐藏具有相同类名的所有元素
- 如何包装彼此相邻且具有相同类的所有元素
- 如何在具有相同类的多元素中找到属性
- push 方法将元素添加到数组中不起作用,同时获取具有相同类的元素的 ID 和值
- Jquery .on('click') 奇怪的行为 - 选择所有具有相同类名的元素
- 仅当具有相同类的元素的中间使用 jQuery 航点到达视口时,才淡入具有相同类的元素
- JavaScript 将事件添加到相同类名的元素
- 在 jquery 中更改具有相同类的多个 html 元素中的文本
- Javascript - 将唯一的元素 id 添加到具有相同类名的多个元素
- 如何使用 JQuery 分别向具有相同类的元素添加不同的内容