Day28-用jQuery写得出ToDoList吗_3_id的重要性与作用

首先先来写id的使用
我们要做一个随机码id的用意是因为，如果我们需要去对特定的label做改变我们需要能抓取到它的唯一id
我一开始是使用content去当辨别的东西，因为id不能用中文就使用了name来抓取
但是如果今天我设了两个一样content的List这样就会出问题，因为它们的name相同会互相影响
所以上一篇做出了唯一的id给每一个List
那这边要来使用这个id了

id可以用英文跟数字去组成，我的一个List有input、label跟a连结
三个部分都需要设置id，使用我们的唯一4码来搭配使用
并不能直接全部给它贴上去我们的随机码，因为id必须是唯一的存在
所以我们需要帮它加一些另外的英文或数字
这边先改改HTML

<li>
    <input type="checkbox" id="CID_HERE" onclick="complete(this)">
    <label class="CLASS_HERE" id="LID_HERE">CONTENT_HERE</label> 
    -<a href="#" id="AID_HERE"> 删除</a>
</li>

帮input、label跟a连结各自设一个id
然後回到update函式帮它们加上东西

function update() {
    result = []
    result = $.map(todos, function (item, index) {
        return item.id;
    })
    $("#add").empty()
    $.each(todos, function (item, index) {
        let tmp = $('#template01');
        let div = tmp.html();
        div = div.replace("CID_HERE", "mycheck_" + index.id);
        div = div.replace("LID_HERE", "mylabel_" + index.id);
        div = div.replace("CONTENT_HERE", index.content);
        div = div.replace("AID_HERE", "mybutton_" + index.id);
        $("#add").append(div)
    });
}

这边我在每个id前面加上了一些英文，让每个List之中id不会重复，但也因为我们做了唯一4码随机码，所以List互相也不会有重复的id
这边放开发者工具的程序码给大家看

蓝框是两个List，每个List之中的id没有重复，但尾巴是一样的，因为它们是用同一个随机码
红线的部分是不同的List是用不同的随机码，所以id也会不同

那这边id都设好之後我们来把input要使用的complete()写好
input的onclick需要写成complete(this)，因为我们会需要去抓取id
概念是
先抓取到id之後，去掉我们多加上的文字
然後回到todos去改掉对应List中complete的true跟false
最後对对应的label加上或删除含有删除样式的CSS
程序码如下

function complete(todo) {
    var Mid = todo.id.replace("mycheck_", "")
    todos[result.indexOf(Mid)].complete = todo.checked;
    var Lid = $("#mylabel_" + Mid);
    if (todos[result.indexOf(Mid)].complete) Lid.addClass("completed")
    else Lid.removeClass("completed")
}

这样子去处理过後，我们就能去控制每一个List的完成与否了

然後我们需要对update做一个修正
在我们更新时，我们需要把List的状态也带上去
这边在新增div後，判断这个List是否完成，如果完成，就直接抓取对应的id然後去新增状态到HTML
这边直接放完整程序码

function update() {
    result = []
    result = $.map(todos, function (item, index) {
        return item.id;
    })
    $("#add").empty()
    $.each(todos, function (item, index) {
        let tmp = $('#template01');
        let div = tmp.html();
        div = div.replace("CID_HERE", "mycheck_" + index.id);
        div = div.replace("LID_HERE", "mylabel_" + index.id);
        div = div.replace("CONTENT_HERE", index.content);
        div = div.replace("AID_HERE", "mybutton_" + index.id);
        $("#add").append(div)
        if (index.complete) {
            $("#mylabel_"+ index.id).addClass("completed");
            $("#mycheck_"+ index.id).prop('checked','true');
        }
    });
}

因为我的判别式加在.append之後，所以是可以抓取到id的~

篇幅有点长，主要想把id的使用比较重点介绍
会发现我整篇文一直提到随机码的运用，因为它很重要

这边一定要帮每一个List的物件去建立属於自己的id，因为很多功能要去避免互相影响，比如这一篇说的完成後去更改样式，亦或是下一篇会说的删除List跟更改List内容的部分
如果使用可能重复的class名称去抓很可能会互相影响，点击A却让B也有反应
而id又必须是唯一不重复的，所以我们利用了自定义的字串+随机码的组合
让同样一个List中的id不同又有相关联
这样便能用jQuery去抓取"不同List要使用同样函式的div"，又能让它们不要影响到其他的List