我添加不了,console也不报错怎么办

来源:4-3 添加及查看Task(3)

斜阳暖青草

2017-07-03

;(function () {

'use strict';


     var $form_add_task=$('.add-task');

     var new_task={};

     var task_list=[];

     init();

     $form_add_task.on('submit',function(e) {

      // 禁用默认行为

         e.preventDefault();

         // 获取新task的值

         new_task.content=$(this).find('input[name=content]').val();

         // 如果新task的值为空,则直接返回,否则继续执行

         if(!new_task.content) return;

         // 存入新task

         if(add_task(new_task)) {

          render_task_tpl(new_task);

          render_task_list();

          console.log('1',1);

         }

     })

   

     function init() {

      task_list=store.get('task_list') || [];

     }

     function add_task(new_task) {

      /*将新task加入到task_list数组里*/

      task_list.push(new_task);

      /*更新localStorage*/

      store.set('task_list',task_list);


      return true;


     }



     function render_task_tpl(data){

      var list_item_tpl=

          '<li class="task-item">'+

             '<span><input type="checkbox"></span>'+

             '<span class="task-content">'+data.content+

             '</span>'+

             '<span>删除</span>'+

             '<span>详细</span>'+

             '</li>';

        return $(list_item_tpl);

     }


     function render_task_list() {

      var $task_list=$('.task_list');

      for(var i=0;i<task_list.length;i++) {

           var $task=render_task_tpl(task_list[i]);

           $task_list.append($task);

      }

     }

     

})();


写回答

1回答

不停思考者

2017-07-20

1.new_task要每次都生成一个新的

var new_task = {};

new_task.content=$(this).find('input[name=content]').val();

2.增加渲染:render_task_list

function add_task(new_task) {

      /*将新task加入到task_list数组里*/

      task_list.push(new_task);

      /*更新localStorage*/

      store.set('task_list',task_list);

        render_task_list();

      return true;

     }

3.取得class名称要对,应该是.task-list,而不是.task_list

function render_task_list() {

      var $task_list=$('.task-list');

      for(var i=0;i<task_list.length;i++) {

           var $task=render_task_tpl(task_list[i]);

           $task_list.append($task);

      }

     }


1
0

6小时 jQuery开发一个前端应用

搭建一个清单应用,一次性掌握jQuery核心功能和使用技巧

1219 学习 · 161 问题

查看课程