按類隱藏元素（只有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）

回答

相關問題