javascript - jQuery 待办事项列表

Question

我正在研究用 jQuery(当然还有 JS)编写的简单待办事项列表。我已经创建了静态待办事项列表，可以仅通过编辑代码来添加新项目。从逻辑上讲，我现在要创建一个动态列表。

我已经尝试过一些方法，例如来自外部文件的 .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" 内)

Answer 1

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

您可以查看here .