Versuch, nach Klasse zu suchen und Element zu verbergen

Question

Wie kann ich ein bestimmtes Klassenelement basierend auf einer bestimmten ID verbergen?

Zum Beispiel in dem Code hier, ich möchte die <div class="base"> mit ID versteckte green

<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

Angenommen, Sie jQuery verwenden, würden Sie den Code $("#green").hide(); verwenden, um dies zu erreichen. Um eines der divs innerhalb von 'grün' zu erhalten, können Sie $("#green .base").hide(); verwenden, um es zu verbergen.

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>