如何使用JavaScript更改类的显示？

所以我有这个代码：

函数show_all（）
{
document.getElementByClassName（'login'）.style.display='inline'；
document.getElementById（'button-hide'）.style.display='inline'；
document.getElementById（'button-show'）.style.display='none'；
};
函数hide_all（）
{
document.getElementByClassName（'login'）.style.display='none'；
document.getElementById（'button-hide'）.style.display='none'；
document.getElementById（'button-show'）.style.display='inline'；
};

用户名：
密码：
不需要隐藏的东西


函数show_all（）
{
$（'.login'）.css（'display'，'block'）；
document.getElementById（'button-hide'）.style.display='inline'；
document.getElementById（'button-show'）.style.display='none'；
};
函数hide_all（）
{
$（'.login'）.css（'display'，'none'）；
document.getElementById（'button-hide'）.style.display='none'；
document.getElementById（'button-show'）.style.display='inline'；
};

用户名：
密码：
不该隐藏的东西

更改每个元素的
显示是个坏主意。只需切换所有这些
login
s包装器的类，并在CSS中设置
display
。
在找到CSS规则后，您可以使用如下函数更改它

function findCssRule(selector){
    var sheet;
    var list;
    var rule;
    var sheets = document.styleSheets;

    if(sheets) {
        for(var i = 0; sheet = sheets[i++]; ) {
            list = sheet.cssRules || sheet.rules;   // sheet.rules in IE;
            for( var j = 0; j < list.length; ++j) {
                rule=list[ j]
                if(rule.type != 1)  // styleRule
                    continue;
                if(rule.selectorText != selector)
                    continue;
                return rule;
            }
        }
    }
    return null;
}

我没有注意到其他人做这种事情，所以请在使用前检查一下。@br3t的响应方式更为常见。
一个建议，为什么不使用JQuery呢。它非常简单，样式可以是none/inline/block等

$('.className').css('display','style');

展示：

隐藏：

现在有点晚了，但这得到了一些看法。为什么不：

var arrayOfElements=document.getElementsByClassName('login');
var lengthOfArray=arrayOfElements.length;

for (var i=0; i<lengthOfArray;i++){
    arrayOfElements[i].style.display='inline';
}

var arrayOfElements=document.getElementsByClassName（'login'）；
var lengthOfArray=arrayOfElements.length；
对于（var i=0；i我只是使用了jQuery的脱机版本。
我遇到了同样的问题，在几乎没有JavaScript经验之后，在一天内就制定出了这个解决方案。因此，如果有什么问题，请注意并评论。我发现了
GetElementsByCassName（）
方法，该方法返回具有所有给定类名的所有子元素的类似数组的对象。此外，我希望能够从一个按钮执行此操作，因此这可能取决于是否要隐藏或显示两个按钮。可以使用
classList.add（）
和
classList.remove（）
执行此操作

创建CSS类：

.hidden { display: none; }

然后使用此函数按类将HTML元素作为目标：

function toggleMe() {
    var x = document.getElementsByClassName("comment");
    var i;
    for (i = 0; i < x.length; i++) {
        x[i].classList.toggle("hidden");
    }
}

函数toggleMe（）{
var x=document.getElementsByClassName（“注释”）；
var i；
对于（i=0；i

for循环用于获取此类的所有元素，并使用classList.toggle为这些元素切换.hidden类

您还可以使用
querySelectorAll（）
，它返回文档中与指定CSS选择器匹配的所有元素。
我也遇到过这个问题。使用jQuery确实可以帮助消除使用Id标记或自定义javascript函数的单调性

您只需将类添加到每个元素中，然后在javascript函数中使用一行jQuery来隐藏或显示这些类

HTML:

jquery回答行吗？根据@AnujaAgarwal的说法，jquery解决方案仍然是javascript，尽管它引入了一个新的依赖项。也就是说，这个解决方案只需要几行代码，值得采用这个库。它不是ajax或jquary……我不这么认为PO要求jquery解决方案，甚至没有标记Jquerywell，我确实在co中问过他首先是mments，他没有回复，所以我以任何方式发布了它，以防他回复yes。我他想使用jQuery，然后这是一个非常简短的答案，他可以自由使用它。正如他之前所说，他在这个类中有50个元素，我认为最好运行两个
for
循环。如果他不使用jQuery库，那么对于这一行，他需要添加j查询插件和答案应该是po询问用户用java提问和答案是否用C#你觉得可以吗？正如我说的，这是他的选择。如果他不想使用它，他可以自由探索其他答案。我不会强迫他使用jQuery。你为什么一直抱怨它。此外，你的答案在适当的上下文中也会起作用，我想t在问题的标题和注释中明确表示它需要Javascript，而不是jQuery。
var arrayOfElements=document.getElementsByClassName('login');
var lengthOfArray=arrayOfElements.length;

for (var i=0; i<lengthOfArray;i++){
    arrayOfElements[i].style.display='inline';
}

.hidden { display: none; }

function toggleMe() {
    var x = document.getElementsByClassName("comment");
    var i;
    for (i = 0; i < x.length; i++) {
        x[i].classList.toggle("hidden");
    }
}

<div class="example"><p>Hide me</p></div>
<button ... onclick="exampleClick()">Click to Hide</button>

function exampleClick() {
jQuery(".example").hide();
}