点击主DIV显示/隐藏子DIV，类似于扰流板（纯JS）

Question

我有20行DIV。初始状态隐藏所有的破坏者，是像下面（我在这里展示的第3行）：

<div class="main" onClick="showHide()"> 
some text 1 
<div class="spoiler hide">spoiler</div> 
</div> 

<div class="main" onClick="showHide()"> 
some text 2 
<div class="spoiler hide">spoiler 2</div> 
</div> 

<div class="main" onClick="showHide()"> 
some text 3 
<div class="spoiler hide">spoiler 3</div> 
</div> 

等。

CSS：

<style> 
.main{background:silver;padding:1em;margin-bottom:1em} 
.hide{display:none} 
.show{display:block} 
</style> 

我的目标是操纵/变化用户点击“主”DIV后的扰流类。也就是说，点击其中一个“主”DIV后，“剧透隐藏”类应该自动变为“剧透”，以便显示文本。当用户点击另一个“主要”DIV时，所有“剧透表演”类应该变成“剧透隐藏”，只有当前点击的“主”DIV应该应用“剧透表演”类。

所以它基本上就像一个切换，其中只有一个（最后点击）DIV显示扰流板。我希望找到最简单/最快的解决方案（JS中的一行也可以）。

我试着用下面的一些JS函数，但不能使它工作。我也读过'document.querySelectorAll'可能会以某种方式使用..我不能在这里使用jQuery。

<script> 
function showHide() { 
var e = document.getElementsByClassName('spoiler hide'); 
for(i=0; i<e.length; i++) { 
e[i].className ='spoiler show'; 
} 
} 
</script> 

Answer 1

试试这个：

<script> 
    function showHide(sender) {  
    var e = sender.getElementsByClassName('spoiler hide'); 

    for(i=0; i<e.length; i++) 
    { 
     e[i].className ='spoiler show'; 
    } 
} 
</script>  

<div class="main" onclick="showHide(this)"> 
    some text 1 
    <div class="spoiler hide">spoiler</div> 
</div> 

<div class="main" onClick="showHide(this)"> 
    some text 2 
    <div class="spoiler hide">spoiler 2</div> 
</div> 

<div class="main" onClick="showHide(this)"> 
    some text 3 
    <div class="spoiler hide">spoiler 3</div> 
</div> 

工作小提琴这里：http://jsfiddle.net/t0shq84f/