Question

我想按类名隐藏Elements。我发现了一个在函数之外运行的工作示例。但是，当我使用onClick时，它似乎不再起作用了。请看一下以下示例：http://jsfiddle.net/SkfDz/9/ 有人可以帮帮我吗？

HTML：

<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>

<div class="today">TODAY</div>
<div class="today">TODAY</div>
<div class="today">TODAY</div>

<div class="tomorrow">TOMORROW</div>

脚本：

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';
}

Answer 1

它在jsfiddle中不起作用的原因是你的hideToday函数超出了范围。我不知道jsfiddle中的脚本存在哪个范围，但它似乎不是全局的。

如果您在网页中放入相同的代码并进行查看，则按预期方式运行：

<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>

您可以通过将hideToday导出到window：

来修复您的小提琴

window["hideToday"] = hideToday;

http://jsfiddle.net/SkfDz/16/

Answer 2

如果您想以这种方式使用onClick，这是一个坏主意，您需要将javascript放在Head中，这样您只需更改左上角的第二个选择框即可让您的小提琴工作到No wrap - in <head>但最好不要使用内联javascript并将事件处理放在外部文件中。

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

2 个答案: