按类隐藏元素（只有Javascript，没有Jquery）

我想按类名隐藏元素。我发现了一个运行在函数之外的工作示例。但是，当我使用onClick时，它似乎不再适用。请看下面的例子：http://jsfiddle.net/SkfDz/9/ 任何人都可以帮我吗？按类隐藏元素（只有Javascript，没有Jquery）

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

来源

2014-07-02 user3797772

[你可以用CSS更简单快速地做到这一点。]（http://jsfiddle.net/XtM4C/） – Pointy

如果你想使用的onClick这样，这是一个坏主意，你需要把你的JavaScript在你Head，所以你只需将左上角的第二个选择框更改为No wrap - in <head>就可以使您的小提琴工作。但是，最好不要使用内嵌JavaScript并将事件处理也放在外部文件中。

来源

2014-07-02 13:15:53

它在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/

来源

2014-07-02 13:17:14 spender

thx！我不知道 – user3797772

jsfiddle控件允许你告诉它将输入在左下象限中的代码打包在窗口“加载”处理程序中。也可以告诉它不要这样做。 – Pointy

按类隐藏元素（只有Javascript，没有Jquery）

回答

相关问题