按类隐藏元素（仅Javascript，无Jquery）_Javascript_Onclick

按类隐藏元素（仅Javascript，无Jquery）

javascript

按类隐藏元素（仅Javascript，无Jquery）,javascript,onclick,Javascript,Onclick,我想按类名隐藏元素。我发现了一个在函数外部运行的工作示例。然而，当我使用onClick时，它似乎不再起作用了。请看以下示例：有人能帮我吗 HTML: 今天隐藏今天躲起来今天今天今天明天脚本： function hideToday() { var todayElements = document.getElementsByClassName('today'), i; for (i = 0; i < todayElements.length; i += 1)

我想按类名隐藏元素。我发现了一个在函数外部运行的工作示例。然而，当我使用onClick时，它似乎不再起作用了。请看以下示例：有人能帮我吗

HTML:

今天隐藏
今天躲起来
今天
今天
今天
明天

脚本：

function hideToday() {
    var todayElements = document.getElementsByClassName('today'), i;
    for (i = 0; i < todayElements.length; i += 1) {
    todayElements[i].style.display = 'none';
    };
};

var tomorrowElements = document.getElementsByClassName('tomorrow'), i;
for (i = 0; i < tomorrowElements.length; i += 1) {
    tomorrowElements[i].style.display = 'none';
}

函数隐藏日（）{
var todayElements=document.getElementsByClassName（'todayElements'），i；
对于（i=0；i

如果您想以这种方式使用onClick，这是一个坏主意，那么您需要将javascript放在

头部

，因此，您只需将左上角的第二个选择框更改为

无换行

，就可以使您的小提琴工作，但最好不要使用内联javascript，也不要将事件处理放在外部文件中。

它在JSFIDLE中不工作的原因是您的

hideToday

函数超出了范围。我不知道JSFIDLE中的脚本存在哪个作用域，但它似乎不是全局的

如果您将相同的代码放在网页中并查看它，它将按预期工作：

<html>
<body>
    <input class="" name="options" id="opt1" type="radio" onClick="hideToday()"/><label for="opt1">Hide today</label>
    <input class="" name="options" id="opt1" type="radio" onClick="hideToday()"/><label for="opt1">Hide today</label>
    <br>
    <br>
    <div class="today">TODAY</div>
    <div class="today">TODAY</div>
    <div class="today">TODAY</div>
    <br>
    <div class="tomorrow">TOMORROW</div>
    <script>
        function hideToday() {
            var todayElements = document.getElementsByClassName('today'), i;
            for (i = 0; i < todayElements.length; i += 1) {
            todayElements[i].style.display = 'none';
            };
        };

        var appBanners = document.getElementsByClassName('tomorrow'), i;
        for (i = 0; i < appBanners.length; i += 1) {
            appBanners[i].style.display = 'none';
        }
    </script>
</body>
</html>

JSFIDLE控件允许您告诉它将左下象限中键入的代码包装到窗口“加载”处理程序中。也可以告诉它不要那样做。

<html>
<body>
    <input class="" name="options" id="opt1" type="radio" onClick="hideToday()"/><label for="opt1">Hide today</label>
    <input class="" name="options" id="opt1" type="radio" onClick="hideToday()"/><label for="opt1">Hide today</label>
    <br>
    <br>
    <div class="today">TODAY</div>
    <div class="today">TODAY</div>
    <div class="today">TODAY</div>
    <br>
    <div class="tomorrow">TOMORROW</div>
    <script>
        function hideToday() {
            var todayElements = document.getElementsByClassName('today'), i;
            for (i = 0; i < todayElements.length; i += 1) {
            todayElements[i].style.display = 'none';
            };
        };

        var appBanners = document.getElementsByClassName('tomorrow'), i;
        for (i = 0; i < appBanners.length; i += 1) {
            appBanners[i].style.display = 'none';
        }
    </script>
</body>
</html>

window["hideToday"] = hideToday;