todoList 练习

<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>jQuery 练习</title>

    <link rel="stylesheet" href="index.css">
    <style>
      .todo-main li button {
        display: none;
      }
    </style>
    <script type="text/javascript" src="jquery-1.11.1.min.js"></script> 
  </head>

  <body>
    <div id="root">
      <div class="todo-container">
        <div class="todo-wrap">
          <div class="todo-header">
            <input id="newTodo" type="text" placeholder="请输入你的任务名称，按回车键确认" />
          </div>
          <ul class="todo-main">

          </ul>
          <div class="todo-footer">
            <label>
          <input id="checkAll" type="checkbox"/>
        </label>
            <span>
          已完成<span id="allCompletedTodos">0</span> / 全部<span id="allTodos">2</span>
            </span>
            <button id="removeAllCompleted" class="btn btn-danger">清除已完成任务</button>
          </div>
        </div>
      </div>
    </div>

    <script type="text/javascript">

    $(function(){
      var dataJson = [
        {
        'content':'睡觉'
        },
        {
        'content':'吃饭'
        },
        {
        'content':'打豆豆'
        }
       ];
 
       // 获取ul 元素
       var $todoMain = $('.todo-main'); 
       // 获取全选按钮
       var checkAll = $('#checkAll');
      // 处理数据 创建对应的结构渲染页面 
       function bindData(data){ 
          //  循环拼装节点
          for(var i=0;i<data.length;i++){ 
            $todoMain.append('<li class="todoItem" style="background: rgb(255, 255, 255);"><label><input type="checkbox"><span>'+data[i].content+'</span></label><button class="btn btn-danger" style="display: none;">删除</button></li>')
          }
          // 更新任务
          allTodos();
       }

       // 数据绑定
       bindData(dataJson);

       // 更新任务总数
       function allTodos(){
         $('#allTodos').html($todoMain.children('li').length);
       }

       // 判断任务全部被选中
       $todoMain.delegate('.todoItem input','click',function(){
         // 更新已完成任务数量
         allCompletedTodos();
         // 判断所有任务 有没有都被选中
         checkAll.prop('checked',$todoMain.find(':checkbox:not(:checked)').length == 0)
       })

      // 更新已完成任务数量
      function allCompletedTodos(){
        $('#allCompletedTodos').html($todoMain.find(':checkbox:checked').length)
      }

      //  全选功能
      checkAll.click(function(){ 
        // 让所有的任务的复选框  与全选按钮的复选框状态一致
        $todoMain.find(':checkbox').prop('checked',this.checked);
        // 更新已完成任务数量
        allCompletedTodos();
      }) 

      //(事件委托) 移入移除 显示删除按钮
      $todoMain.delegate('.todoItem','mouseenter',function(){
        $(this).css('background','#ccc');
        $(this).children('button').show();
      })

      $todoMain.delegate('.todoItem','mouseleave',function(){
        $(this).css('background','#fff');
        $(this).children('button').hide();
      })

      // 删除功能
      $todoMain.delegate('.todoItem button','click',function(){
        $(this).parent().remove();
        // 更新总数
        allTodos();
        // 更新已完成任务数
        allCompletedTodos(); 
        // 可能会删除未完成的任务 且删除之后 其余任务都是已完成 最终全选的按钮状态不正确
        checkAll.prop('checked',$todoMain.find('li').length != 0 && $todoMain.find(':checkbox:not(:checked)').length == 0);
      })

      // 清除已完成任务
      $('#removeAllCompleted').click(function(){
        $todoMain.find(':checkbox:checked').parent().parent().remove();
        // 更新任务总数
        allTodos();
        // 更新已完成任务数量
        allCompletedTodos();

        checkAll.prop('checked',false);
      })

      // 根据输入的内容创建 响应的任务 
      $('#newTodo').keydown(function(){
        // 所有创建相关的逻辑 都要在 按下回车的前提之前
        if(event.keyCode == '13'){
            // 判断输入的值 去除空格后 是否还有内容
            if($.trim($(this).val())){
              // 执行创建
              var data = [
                {
                  'content':$(this).val()
                }
              ]
              bindData(data);
              // 更新全选状态
              checkAll.prop('checked',false);

            }else{
              alert('请输入内容...'); 
            }
            // 清空内容
            $(this).val('');
        }
      })

    })
    </script>
  </body>

</html>
posted @ 2020-08-09 20:06  13522679763-任国强  阅读(80)  评论(0)    收藏  举报