Javascript隱藏顯示動態div

Question

我對Javascript很新。 我有一個應用程序，具有與上述里程碑相關的里程碑和任務。我通過在Javascript中使用toggleClass來隱藏和顯示與任務相關的任務。我試圖隱藏並顯示與Milestone相關的任務組，以檢查與Milestone相關聯的複選框。我可以讓它工作，但如果我有多個里程碑，複選框會切換所有任務的隱藏，而不是與里程碑關聯的隱藏。我無法使用ID，因爲我正在動態地調用里程碑。我只想隱藏給定的未經檢查的里程碑的子div中的任務。

我創建了一個的jsfiddle

http://jsfiddle.net/aow9f6h2/1/

<div class="milestone" style="text-align:left; width:100%"> 
    <div class="milestone-row"><i class="fa fa-caret-down pull-right"></i> 
    <label class="milestone-name"><input type="checkbox" class="milestone-name-box" checked="true"> MILESTONE NAME</label> 
    </div> 
<div class="row task-group " > 
<!-- panel-default --> 
     <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3 " >  <label class="tasks"><input type="checkbox" checked="true"> Task Name</label></div> 
     <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3 " >  <label class="tasks"><input type="checkbox" checked="true"> Task Name</label></div> 
     <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3 " >  <label class="tasks"><input type="checkbox" checked="true"> Task Name</label></div> 
     <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3 " >  <label class="tasks"><input type="checkbox" checked="true"> Task Name</label></div> 
     <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3 " >  <label class="tasks"><input type="checkbox" checked="true"> Task Name</label></div> 
     <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3 " >  <label class="tasks"><input type="checkbox" checked="true"> Task Name</label></div> 
     <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3 " >  <label class="tasks"><input type="checkbox" checked="true"> Task Name</label></div> 
     <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3 " >  <label class="tasks"><input type="checkbox" checked="true"> Task Name</label></div> 
     <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3 " >  <label class="tasks"><input type="checkbox" checked="true"> Task Name</label></div> 
     <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3 " >  <label class="tasks"><input type="checkbox" checked="true"> Task Name</label></div> 

     <!-- ad 100 x 250 --> 
     <!-- particpants --> 

</div><!-- row --> 
</div><br><br> 
      <div class="milestone" style="text-align:left; width:100%"> 
    <div class="milestone-row"><i class="fa fa-caret-down pull-right"></i> 
    <label class="milestone-name"><input type="checkbox" class="milestone-name-box" checked="true"> MILESTONE NAME</label> 
    </div> 
<div class="row task-group " > 
<!-- panel-default --> 
     <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3 " >  <label class="tasks"><input type="checkbox" checked="true"> Task Name</label></div> 
     <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3 " >  <label class="tasks"><input type="checkbox" checked="true"> Task Name</label></div> 
     <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3 " >  <label class="tasks"><input type="checkbox" checked="true"> Task Name</label></div> 
     <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3 " >  <label class="tasks"><input type="checkbox" checked="true"> Task Name</label></div> 
     <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3 " >  <label class="tasks"><input type="checkbox" checked="true"> Task Name</label></div> 
     <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3 " >  <label class="tasks"><input type="checkbox" checked="true"> Task Name</label></div> 
     <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3 " >  <label class="tasks"><input type="checkbox" checked="true"> Task Name</label></div> 
     <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3 " >  <label class="tasks"><input type="checkbox" checked="true"> Task Name</label></div> 
     <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3 " >  <label class="tasks"><input type="checkbox" checked="true"> Task Name</label></div> 
     <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3 " >  <label class="tasks"><input type="checkbox" checked="true"> Task Name</label></div> 

     <!-- ad 100 x 250 --> 
     <!-- particpants --> 

</div><!-- row --> 
</div> 

JS

$("input[type='checkbox']").change(function() { 
    $(this).closest("label").toggleClass("unchecked"); 
}); 



    $(".milestone input[class='milestone-name-box']").click(function(e) { 
    e.stopPropagation(); 
      $(".task-group").toggleClass("hide"); 

}); 

CSS

.hide { 
    display: none !important; 
    } 

    .unchecked {  
    font-weight:400; 
    color:#A4A4A4; 
    letter-spacing:.5px; 

    } 

Answer 1

這樣的事情？ http://jsfiddle.net/aow9f6h2/2/

<div class="section"> 
    <input type="checkbox" class="milestone"/>Milestone<br/> 
    <div class="task"><input type="checkbox" />Task</div> 
    <div class="task"><input type="checkbox" />Task</div> 
    <div class="task"><input type="checkbox" />Task</div> 
</div><br/> 
<div class="section"> 
    <input type="checkbox" class="milestone"/>Milestone<br/> 
    <div class="task"><input type="checkbox" />Task</div> 
    <div class="task"><input type="checkbox" />Task</div> 
    <div class="task"><input type="checkbox" />Task</div> 
</div> 

$(document).ready(function() { 
    $('.milestone').attr('checked', true); 
    $('.milestone').on('change', function() { 
     if($(this).is(':checked')) { 
      $(this).closest('.section').find('.task').show(); 
     } 
     else { 
      $(this).closest('.section').find('.task').hide(); 
     } 
    }); 
}); 

Answer 2

使用上的http://api.jquery.com/on/而不是直接發送通風裝訂