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 に答える