如果在触摸选择选项后其子 div class="number"被隐藏，我将隐藏父 div class="letter"。 我尝试使用此处显示的脚本的最后几行来执行此操作。 为了更好地理解我需要什么，打开片段预览 html 文件，然后选择第一个选择中的所有字母和第二个选择中的数字 5。因为数字 5 没有插入到任何 Letter Div 中，所以所有 Div Letter 都应该被隐藏，但它们仍然显示并且是空的。
// function to manage select Letter
$(document).ready(function(){
$("#selectLetter").change(function(){
$(this).find("option:selected").each(function(){
var optionValueLetter = $(this).attr("value");
if(optionValueLetter){
$(".letter").not("." + optionValueLetter).hide();
$("." + optionValueLetter).show();
} else{
$(".letter").hide();
}
});
}).change();
// function to manage select Number
$("#selectNumber").change(function(){
$(this).find("option:selected").each(function(){
var optionValueNumber = $(this).attr("value");
if(optionValueNumber){
$(".number").not("." + optionValueNumber).hide();
$("." + optionValueNumber).show();
} else{
$(".number").hide();
}
});
}).change();
showAll(); // function to show all div
}); // close $(document).ready(function()
// show all div
function showAll(){
$(".letter , .number").show();
}
// function to hide parentdiv letter if child div number is diplay="none"
var children = $(".letter").children($('.number'));
if($(children).css('display') === 'none'){
$(".letter").hide();
}else{
$(".letter").show();
} .letter{
border-left:solid 10px;
border-bottom:solid 4px;
color:white;
border-color:#636c72;
background: #636c72;;
margin-left:10px;
margin-right:10px;
width:60%;
}
.number{
border-left:solid 10px;
border-bottom:solid 4px;
color:white;
border-color:lightblue;
background: rgba(44,159,215, 1);;
margin-left:0px;
width:90%;
}
select{
margin-left:10px;
width: 30%;
border-left: solid 3px;
border-bottom: 0px;
border-right: solid 0px;
border-color: #cbcbcb;
height: 3em;
color: white!important;
background-color: rgba(44,159,215, 1)!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<select id="selectLetter" >
<option value="letter">All Letter</option>
<option value="a">Letter A</option>
<option value="b">Letter B</option>
<option value="c">Letter C</option>
<option value="d">Letter D</option>
</select>
<select id="selectNumber">
<option value="number"> All Number</option>
<option value="1">Number 1</option>
<option value="2">Number 2</option>
<option value="3">Number 3</option>
<option value="4">Number 4</option>
<option value="5">Number 5</option>
</select>
<div class="letter a" >
<div class="title"><p> div LETTER A </p></div>
<div class="number 1"> <p> Number 1</p> </div>
<div class="number 1"> <p> Number 1</p> </div>
<div class="number 2"> <p> Number 2</p> </div>
<div class="number 3"> <p> Number 3</p> </div>
<div class="number 4"> <p> Number 4</p> </div>
</div>
<div class="letter b" >
<div class="title"><p> div LETTER B</p></div>
<div class="number 1"> <p> Number 1</p> </div>
<div class="number 1"> <p> Number 1</p> </div>
<div class="number 2"> <p> Number 2</p> </div>
<div class="number 3"> <p> Number 3</p> </div>
<div class="number 4"> <p> Number 4</p> </div>
</div>
<div class="letter c" >
<div class="title"><p> div LETTER C</p></div>
<div class="number 1"> <p> Number 1</p> </div>
<div class="number 2"> <p> Number 2</p> </div>
<div class="number 3"> <p> Number 3</p> </div>
<div class="number 4"> <p> Number 4</p> </div>
</div>
<div class="letter d" >
<div class="title"> <p>div LETTER D</p> </div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</body>
</html>最佳答案
https://jsfiddle.net/sudarpochong/ap3z3r7s/
我简化了您的代码。
选择/下拉事件处理程序
$("#selectLetter").on("change", selectChangeEventHandler);
$("#selectNumber").on("change", selectChangeEventHandler);
函数selectChangeEventHandler
function selectChangeEventHandler(e) {
var selectedLetter = "." + $("#selectLetter").val();
var selectedNumber = "." + $("#selectNumber").val();
filterLetterNumber(selectedLetter, selectedNumber);
hideLetterDivIfAllNumberDivHidden(selectedLetter);
}
函数filterLetterNumber
function filterLetterNumber(letter, number) {
// console.log("filterLetterNumber", letter, number);
$(".letter").hide();
$(".number").hide();
$(letter).show();
$(number).show();
}
函数hideLetterDivIfAllNumberDivHidden
would hide the parent div class="letter" if its child div class="number" has been hidden after touching a select option
function hideLetterDivIfAllNumberDivHidden(selectedLetter) {
// console.log("hideLetterDivIfAllNumberDivHidden", selectedLetter);
if (!selectedLetter || selectedLetter === "") {
console.log("", selectedLetter);
selectedLetter = ".letter";
}
$(selectedLetter).each(function (index, el) {
console.log("hideLetterDivIfAllNumberDivHidden", index, el);
$(this).show();
//var countHidden = $(el).children(".number:hidden").length;
var countVisible = $(el).children(".number:visible").length;
//console.log("countVisible", countVisible, "countHidden", countHidden);
if (countVisible == 0) {
$(this).hide();
}
});
}
关于javascript - 如果选择选项后隐藏子级，如何隐藏父级 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47557104/