0

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

我已经尝试过一些方法，例如来自外部文件的 .load() 代码、创建 .after()，但对我来说一切都出错了。

你会建议我做什么？

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

如果您能帮我解决这个问题，我将不胜感激。

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>

如您所见，我只写了 1 个列表项。ID 是静态的，目前无法更改。我只需要更改 ID（好的，它将是 var id = 1; id++）并添加代码的一部分（内部<div class="list-item"）

4

2 回答 2

1

你为什么不尝试 jQuery 的 .clone() 并将其附加到“添加项目”行为？

你可以在这里查看。

于 2013-07-22T18:50:03.930 回答
1

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

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>

希望这有帮助:)

于 2015-01-04T12:18:54.320 回答