Day29-用jQuery写得出ToDoList吗_4_单机版ToDoList没有问题!

这篇来说剩下的重要功能

先来写删除的部分
就叫做removeTodo吧
加在a连结上，一样需要回传this
JS的部分
概念比较好理解
一样抓取到id之後，去掉我们多加上的文字
然後在todos中找到它删除掉，再更新就好了

function removeTodo(todo) {
    var Mid = todo.id.replace("mybutton_", "")
    todos.splice(result.indexOf(Mid), 1);
    update()
}

最後我们写一个更动List内容的部分
如果我们双击List的label的话，让使用者可以更换List内容
我的作法是隐藏一个input在label前，然後用function抓取label文字给input
更新完後按确定，一样使用function换成抓取input文字给label，并更新到阵列中

先更改HTML
要新增input跟一个确定用的按钮，并把它们加在同一个div中
然後把之前的label跟删除按钮也绑在另一个div中

<div id="AID_HERE" class="text_css" style="display: none;">
    <input type="text" id="TID_HERE"> - 
    <a href="#" class="ok_css" id="FID_HERE" onclick="confirm(this)">
        确定
    </a>
</div>
<div id="DID_HERE" class="text_css">
    <label id="LID_HERE" ondblclick="alter(this)">CONTENT_HERE</label> - 
    <a href="#" class="remove_css" id="AID_HERE" onclick="removeTodo(this)">
        删除
    </a>
</div>

两个新增个div都要设ID让jQuery帮忙设定与随机码相关的id
等等会新增两个function
一个叫做alter给label使用，我用的是ondblclick，因为我希望双击label才会启动，需要给this值
另一个叫做confirm给确认使用，一样需要给this值

接着进入JS
刚刚新增的id就记得去取帮它们名字嘿，不然会抓不到

先写双击的部分

function alter(todo) {
    var Mid = todo.id.replace("mylabel_", "")
    $("#mydolist_" + Mid).css("display", "none");
    $("#mytext_" + Mid).val(todo.innerText);
    $("#myalter_" + Mid).css("display", "block");
    $("#mycheckforlabel_" + Mid).addClass("dbclick")
}

这个函式首先一样要把随机码取出来，然後我们把含有label的那个div隐藏
并把label中的字放到要显示的input，在把含有input的div显示出来
这样便能打字啦~

接着要让确认键有效果

function confirm(todo) {
    var Mid = todo.id.replace("myconfirm_", "")
    todos[result.indexOf(Mid)].content = $("#mytext_" + Mid).val()
    $("#mylabel_" + Mid).html($("#mytext_" + Mid).val());
    $("#myalter_" + Mid).css("display", "none");
    $("#mydolist_" + Mid).css("display", "block");
}

基本就是刚刚隐藏的显示，刚刚显示的隐藏，文字换成input的给label
多一行是要把新打的文字传给阵列做更新
这边我同步给大家看console.log

然後我要把刚刚在input设的确定键做删除，改成按下enter时会直接送出不用按确定了
这个部份很简单，先把确定键删除掉
然後在双击更改的alter()後面加上侦测，侦测在input打字的状态
如果按下enter送出，就呼叫confirm()这个确认函式
(按下enter送出的部分，我有把一开始加入List的部分偷偷改成这样使用噢噢)
另外我有加了一行addClass的，是我为了避免打字时还能点击checkbox先把它隐藏了，後续确认再removeClass就好
(dbclick是一个display: none; 的CSS样式)

增加後的alter()长这样

function alter(todo) {
    var Mid = todo.id.replace("mylabel_", "")
    $("#mydolist_" + Mid).css("display", "none");
    $("#mytext_" + Mid).val(todo.innerText);
    $("#myalter_" + Mid).css("display", "block");
    $("#mycheckfor_" + Mid).addClass("dbclick")
    $("#myalter_" + Mid).keydown(function (event) {
        if (event.which == 13) {
            confirm(Mid)
        }
    });
}

这边我传给confirm函式的是label的随机码，跟input是同一组，所以可以直接传给confirm
然後因为传进去的数值跟点击按钮时给的this不一样，所以确认函式也要做更改
改成不用特别去抓id或是处理数值，可以直接做使用了

function confirm(todo) {
    var Mid = todo;
    todos[result.indexOf(Mid)].content = $("#mytext_" + Mid).val()
    $("#mylabel_" + Mid).html($("#mytext_" + Mid).val());
    $("#myalter_" + Mid).css("display", "none");
    $("#mydolist_" + Mid).css("display", "block");
    $("#mycheckfor_" + Mid).removeClass("dbclick")
}

为了统一好找所以我还是跟其他函式一样弄成了Mid这个变数去抓~

这样处理後就可以快速地做更动不用一直反覆拿回滑鼠了

最後我要加一个避免多个List同时被点击更改的限制
概念是如果你在更改List的状态下，点击了该List的input以外的地方，我就会直接帮你存档然後确认送出去
程序码是长这样

$("body").click(function (e) {
    if (input != 0) {
        var container = $("#myalter_" + input);
        if (!container.is(e.target) && container.has(e.target).length == 0) {
            confirm(input)
        }
    }
});

直接放在ready中就好，但是为了避免被不断侦测或是侦测不到东西，有多设置一个变数较做input
预设var input = 0; 放在最外层
然後在双击函式的最後加上一行input = Mid; 把目前随机码的数值给到input变数
让点击body时可以去看现在是有打开"更改List的input"的状态，需要侦测是否点到"目标input"以外
也把这个input变数给到点击body的程序码中，用以判断点击的是"目标input"以外的地方
最後在确认函式的最後一行加上input = 0; 用以代表目前已经不再是"更改List的input"的状态了，不用去侦测我点到哪了