jQuery ToDo列表

Question

我负责编写在ToDo上编写的简单jQuery列表(当然还有JS )。我已经创建了静态ToDo列表，可以仅通过编辑代码添加新项。从逻辑上讲，我现在要创建一个动态列表。

我已经尝试过一些方法，比如外部文件中的.load()代码，创建.after()，但这对我来说都是错误的。

你建议我怎么做？

您可以在Strasburgmeetings.org/ccc中找到所有源代码。

如果你能帮我解决这个问题，我将非常感激。

，是的，Add现在不工作了，因为我遇到了我描述的问题。

ncubica，问题是目前我无法向列表中添加新项(只需编辑代码)。动态意味着可以添加/删除项目。为此，我尝试使用带有函数的.after()方法，该方法将复制<li id="item1">List item here</li><li id="buttons1">Buttons here</li> (粗略地说)，但它将所有列表项放在上面，并将所有按钮放在底部。

这是JS代码的一部分：

        <script>
    // Waiting for the document to load
        $(document).ready(function() {
    // Wanted to create a dynamic item list, that's why I used this variable. I thought it would
    // generate unique IDs (there was 'id++' somewhere in the function I already deleted).
            var id = 1;

    // This is going to be used as an action for 'Add Item' button. (It is not a button, actually, it is just <span> with cursor: pointer. Using <a> causes page reload);
            $('.add').click(function() {
                $('#item'+id).after(function(i) { // '#item'+id should be something like this in the code: #item2, #item3, etc.

                })
            })

    // 'Done' button
            $('#done1').click(function() {
                console.log('# "Done" button pressed');
                $('#list1').css('background-color','#89f49a').css('border','1px solid #16bf31').css('text-decoration','line-through').css('color','#817f7f').css('font-weight','normal');
                console.log('# Item doned successfully');
            });

    // 'Undone' button (is gonna be renamed to 'Reset');
            $('#undone1').click(function() {
                console.log('# "Undone" button pressed');
                $('#list1').css('background-color','').css('border','').css('text-decoration','').css('color','').css('font-weight','normal');
            });

    // 'Working' button
            $('#working1').click(function() {
                $('#list1').css('background-color','#edc951').css('border','1px solid #dda119').css('font-weight','bold').css('color','#000').css('text-decoration','none');
            });

    // 'Cancel' button
            $('#cancel1').click(function() {
                $('#list1').css('background-color','#ff8c8c').css('border','1px solid #ea2c2c').css('font-weight','normal').css('text-decoration','line-through').css('color','#f00');
            });
    // 'Delete' button
            $('#del1').click(function() {
                $('div#dlist1').remove();
                $('li#action1').remove();
            });
        });
    </script>

和HTML部分：

<div class="list">
                        <ul id="sortable">
                            <div class="list-item" id="item1"><div class="spacer1" id="spacer1"></div>
                            <div class="l-element" id="dlist1"><li id="list1" class="ui-widget ui-state-default">Create add feature</div>
                            <li id="action1" class="action"><input type="button" value="Done" class="done" id="done1"><input type="button" value="Undone" class="undone" id="undone1"><input type="button" value="Working" class="working" id="working1"><input type="button" value="Cancel" class="cancel" id="cancel1"><span id="del1" class="delete">Delete</span></li>
                            <div class="spacer"></div></div>
                        </ul>
                    <div>

正如你所看到的，我只写了一个列表项目。ID是静态的，目前不能更改。我所需要的只是更改id (ok，它将是var id= 1；id++)，并添加代码的一部分(在<div class="list-item"中)

Answer 1

为什么不尝试jQuery的.clone()并将其附加到"Add“行为中呢？

你可以检查一下，这里。

Answer 2

我个人也做了一个，它的工作非常简单，一个复选框，文本，然后是一个删除按钮。虽然我仍然在研究一种方法，使它在关闭浏览器后保存它，但效果很好。

jQuery代码：

function addListItem() {
    var textToAdd = $('#new-text').val();                    // The finish class is just for css styling
    $('#list').append('<li class="item"><input type="checkbox" class="finish" />' + textToAdd + '<button class="delete">Delete</button></li>');
    $('#new-text').val('');
}

function deleteItem() {
    $(this).parent().remove();
}

$(document).ready(function() {
    $('#add').on('click', addListItem);
    $(document).on('click', '.delete', deleteItem);
});

HTML代码：

<!DOCTYPE html>
<html>
    <head>
        <title>To Do List</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>

        <h2>To Do List</h2>
        <p>Project started on <strong>4-1-2015</strong>.</p>

        <input type="text" id="new-text" /><button id="add">Add</button>

        <ul id="list">

        </ul>

        <script src="jquery.js" type="text/javascript"></script>
        <script src="script.js" type="text/javascript"></script>

    </body>
</html>

希望这有所帮助:)