Day26-用jQuery写得出ToDoList吗_1_新增list没什麽问题

这应该是这次参赛的最後作品了
来挑战用jQuery做一个ToDoList
首先先写简单的架构
一个input，一个送出button，跟要放进template的li架构

<div>
    <input type="text" placeholder="请输入代办事项" id="form-control">
    <button>送出</button>
    <li>
        <input type="checkbox">
        <label>CONTENT_HERE</label> 
        - <a href="#"> 删除</a>
    </li>
</div>

CSS一律最後处理
先来写送出的实际功能
首先li要挪到template中，并新增一个id为add的div，然後进入JS

先写一个addTodo的function，让每次点击送出时都会新增一个list

function update() {
    let tmp = $('#template01');
    let div = tmp.html();
    div = div.replace("CONTENT_HERE", $('#form-control').val());
    $("#add").append(div)
}

记得在button新增一个onclick="update()"

这样我们的基本新增List便完成了

然後我们来让打勾勾有作用
首先我们在CSS中新增一个样式，让完成时label内的文字会被加上删除线

.completed {
    text-decoration: line-through;
}

然後在JS新增一个函式

function complete(todo) {
    if (todo.checked) $('label').addClass("completed")
    else $('label').removeClass("completed")
}

用来判别是否打勾然後加上刚刚设好的样式

但是这边因为我们并没有一个名字给它，点击input时，很可能会把其他的label也一并做了样式的改变，

所以我们这边要新增一个独立的id给input跟label

因为这个id得是独立的id，所以我们会需要把它存取下来然後去比对有没有重复
这样子我们便需要把我们目前拥有的List去暂存在我们的JS中
所以在写id前我们需要先把东西更改成存取在阵列之中的版本

因为篇幅可能会太长，所以写到下一篇之中