Question

我处理在jQuery（和JS当然）上编写的简单ToDo列表。我已经创建了静态ToDo列表，只能通过编辑代码来添加新项目。从逻辑上讲，我现在要创建一个动态列表。

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

你建议我做什么？

中找到所有源代码

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

Gloserio ，是的，添加项目现在不起作用，因为我描述的问题。

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（好吧，它将是var id = 1; id ++）并添加代码的一部分（在<div class="list-item"内）

Answer 1

为什么不尝试使用jQuery的.clone（）并将其附加到“添加项”行为？

您可以查看here。

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 code：

<!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>

希望这有助于：）

jQuery ToDo列表

2 个答案: