Javascript 隐藏显示动态 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://api.jquery.com/on/ 上使用而不是直接事件绑定

Answer 2

像这样的？ 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();
        }
    });
});

Javascript 隐藏显示动态 div

Javascript hide show dynamic divs

javascript

css

dynamic

show-hide