隐藏具有相同类名的所有元素? [英] Hiding all elements with the same class name?

问题描述

我试图隐藏具有相同类名(float_form)的元素，但是我也试图使用下面的脚本来显示它们(所有的float_form类div最初都是隐藏的).我看过很多jquery解决方案，但是我似乎无法使它们中的任何一个都起作用.

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.

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;中的重复类名的方法.在不影响show/hide ID元素的情况下，因为存在一个以div id为键的循环.div的html如下所示，其中{item.ID}是while循环.

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.

 <div class="float_form" id="{item.ID}" style="display: none;"> 

推荐答案

香草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:

$('.float_form').show(); // Shows
$('.float_form').hide(); // hides

这篇关于隐藏具有相同类名的所有元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！