Javascript hide 显示动态 div

Question

我对Javascript很陌生。我有一个应用程序，其中包含与所述里程碑相关的里程碑和任务。我通过在 Javascript 中使用 toggleClass 隐藏并显示与之相关的任务。我正在尝试隐藏和显示与里程碑关联的任务组，以选中与里程碑关联的复选框。我可以让它工作，但是如果我有多个里程碑，复选框会切换所有任务的隐藏，而不是与里程碑关联的任务。 我不能使用 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/上使用而不是直接事件绑定