如果在选择选项后隐藏子项，如何隐藏父div

时间：2017-11-29 16:09:07

标签： javascript jquery html5

我会隐藏父div类=＆＃34;字母＆＃34;如果它的孩子div class =＆＃34; number＆＃34;触摸选择选项后隐藏。 我尝试使用此处显示的最后一行脚本来执行此操作。 要更好地了解我需要的内容，请打开snippetp预览html文件，然后在第一个选择中选择所有字母，在第二个选择中选择数字5。因为5号未插入任何Letter Div中，所有Div Letter应该被隐藏，但它们仍然显示并且为空。

＆＃13;
＆＃13; 
// 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();
        }
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

https://jsfiddle.net/sudarpochong/ap3z3r7s/

我简化了你的代码。

Select/dropdown事件处理程序

$("#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

  

会隐藏父div类=＆＃34;字母＆＃34;如果它的孩子div   类=＆＃34;数＆＃34;触摸选择选项后隐藏了

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();
    }

  });

}
相关问题
最新问题