通过getElementsByClassName的Javascript内联循环_Javascript_Html

通过getElementsByClassName的Javascript内联循环

javascript html

通过getElementsByClassName的Javascript内联循环,javascript,html,Javascript,Html,考虑以下简化的html代码： <html> <head> <style> .opts {display: none} </style> </head> <body onload = "list = document.getElementsByClassName('opts')"> <form>

考虑以下简化的

html

代码：

<html>
    <head>
        <style>
            .opts {display: none}
        </style>
    </head>

    <body onload = "list = document.getElementsByClassName('opts')">

        <form>
            <ul>
                <li>
                    <label>Show Options?</label>
                    <input type="radio" onclick="list[0].style.display = 'block'; list[1].style.display = 'block'; list[2].style.display = 'block';">yes<br>
                    <input type="radio" onclick="list[0].style.display = 'none'; list[1].style.display = 'none'; list[2].style.display = 'none';">no<br>
                </li>

                <li class="opts">
                    <label>Option 1</label>
                    <input type="text">
                </li>

                <li class="opts">
                    <label>Option 2</label>
                    <input type="text">
                </li>

                <li class="opts">
                    <label>Option 3</label>
                    <input type="text">
                </li>

                ... etc ...

            </ul>
        </form>

    </body>

</html>

有没有更简单的方法？例如，类似于：

list[All].style.display = 'block';

ps：当然，这可以通过一些

for loop

和一个附加的函数声明来实现，但我正在寻找一个简单的内联js代码（即：没有外部js文件）

改善效果追踪根据评论，有两种建议的方法可以轻松地编写此内联代码，而无需外部文件：

1）扩展语法

[...list].forEach(el => el.style.display = 'block')

2）

for循环

新语法

for (const x of list) x.style.display = "block";

特别是，我决定使用

for循环

新语法，因为它比扩展语法更易于阅读。但是，由于这两种方式都是JavaScript的最新特性，因此建议对较旧的浏览器兼容性保持谨慎

//环境的设置
常量全部=符号（“全部”）；
常量setter={set:function（fn）{
for（var i=0；ix.style.fontwweight=“bold”



显示选项？
是

否



选择1


选择2


选择3

... 等

考虑切换类，而不是直接设置显示值。另外，对于直接的二进制选择，我只需要使用一个复选框
使用forEach在数组上迭代代码不多，适应较旧的浏览器也很简单：

函数切换选项（）{
var opts=Array.from（document.querySelectorAll（'.opts'）；
opts.forEach（函数（opt）{
opt.style.display=this.checked？“”：“无”；
}，这个）；
}
window.onload=函数（）{
document.getElementById（'optoggle'）。addEventListener（'click'，toggleOpts，false）；
}
示例


显示选项？
对


选择1


选择2


选择3


不，除非使用某种循环，否则不能内联执行。非常简短：[…list].forEach（el=>el.style.display='block'）
虽然我会选择更可读的内容。block
应该是'block'
（我的评论中没有引用），但可以getElementsByClassName
返回HTMLCollection，因此使用[…list]
使用扩展语法将其转换为数组，这样您就可以使用array\forEach
。为什么您认为for
循环需要另一个函数声明？您可以使用for of
循环，不必使用任何函数或全局变量<代码>用于（列表的常数x）x.style.display=“block”用引号括起来，但如果你想在HTML中添加那么多重复的JS，那是可以的。你可能不应该假设浏览器实现了主机对象的原型继承。没有要求它们这样做，或者至少它们是可修改的，请参阅。上面的代码在Chrome中抛出错误。@RobG:那篇文章在6年前基本上是相关的。我在Chrome中没有错误。任何不允许修改主机对象的浏览器都是没有人会使用的浏览器，因为大多数JS代码都会被破坏。在Chrome版本58.0.3029.110和IE 11中会抛出错误。我在一个SOE是Windows7的网站上，所以不要因为我运行的浏览器而责备我（我希望有很多人因为类似的原因不能运行最新的浏览器）。绝大多数脚本都不会修改宿主对象，这是一个糟糕的设计决策。大多数网站似乎都避开了它。在IE中，HTMLCollection的类型返回“对象”，而不是“函数”。很可能在将来的浏览器中会密封一些主机对象，因此您无法修改它们。@RobG:Chrome从一开始就可以修改主机对象。错误可能来自ES6语法。（尽管不是原型）。在主机原型上填充丢失/损坏的内容是非常常见的。是的，网络会崩溃。浏览器不太可能密封这些对象。typeof
结果无关紧要，与是否可以扩展其.prototype完全无关。
for (const x of list) x.style.display = "block";