クラスと要素を非表示にしよう

Question

特定のIDに基づいて特定のクラス要素を非表示にするにはどうすればよいですか？

は、例えば、ここでのコードで、私はあなたがjQueryのを使用していると仮定すると、ID​​

<div id="green"> 
<div class="base" onclick="prirad(1, 'green')"></div> 
<div class="three_s" onclick="prirad(2, 'green')"></div> 
<div class="three_v" onclick="prirad(3, 'green')"></div> 
<div class="two_s" onclick="prirad(4, 'green')"></div> 
<div class="two_v" onclick="prirad(5, 'green')"></div> 
<div class="square" onclick="prirad(6, 'green')"></div> 
</div> 
<div id="blue"> 
<div class="base" onclick="prirad(1, 'blue')"></div> 
<div class="three_s" onclick="prirad(2, 'blue')"></div> 
<div class="three_v" onclick="prirad(3, 'blue')"></div> 
<div class="two_s" onclick="prirad(4, 'blue')"></div> 
<div class="two_v" onclick="prirad(5, 'blue')"></div> 
<div class="square" onclick="prirad(6, 'blue')"></div> 
</div> 

Answer 1

で<div class="base">を隠したいのですが、あなたはこれを達成するために、コード$("#green").hide();を使用します。 divの1つを「緑色」の中に入れるには、それを隠すのに$("#green .base").hide();を使うことができます。

Hide Method

Answer 2

// Get all id green element 
 
const allHideElement = document.querySelectorAll("div #green"); 
 
// Loop all the element 
 
allHideElement.forEach(function(element){ 
 
    // Add the class of "isHdie" of match element,but you can do anything you want :P 
 
    element.classList.add("isHide"); 
 
});

.isHide{ 
 
    background: skyblue; 
 
    width: 10em; 
 
    height: 10em; 
 
}

<div id="green"> 
 
<div class="base" onclick="prirad(1, 'green')"></div> 
 
<div class="three_s" onclick="prirad(2, 'green')"></div> 
 
<div class="three_v" onclick="prirad(3, 'green')"></div> 
 
<div class="two_s" onclick="prirad(4, 'green')"></div> 
 
<div class="two_v" onclick="prirad(5, 'green')"></div> 
 
<div class="square" onclick="prirad(6, 'green')"></div> 
 
</div> 
 
<div id="blue"> 
 
<div class="base" onclick="prirad(1, 'blue')"></div> 
 
<div class="three_s" onclick="prirad(2, 'blue')"></div> 
 
<div class="three_v" onclick="prirad(3, 'blue')"></div> 
 
<div class="two_s" onclick="prirad(4, 'blue')"></div> 
 
<div class="two_v" onclick="prirad(5, 'blue')"></div> 
 
<div class="square" onclick="prirad(6, 'blue')"></div> 
 
<div id="green"></div> 
 
</div>