試圖按類和隱藏元素匹配

Question

如何隱藏基於特定ID的特定類元素？

例如，在這裏的代碼，我想用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

假設你正在使用jQuery躲到<div class="base">，您將使用代碼$("#green").hide();做到這一點。要獲得「綠色」內的其中一個div，您可以使用$("#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>