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/代替直接事件绑定

Javascript隐藏显示动态div

2 个答案: