3

これが私がやろうとしていることです: todo リストにエントリを追加するために使用できる入力フィールドがあります。ユーザーが [追加] をクリックした後、JQuery を使用して、並べ替えられたエントリのリストを表示します。また、リストをソート可能にしました（jQueryを使用してマウスドラッグで順序を変更できます）。ダブルクリックしたときに個々のリスト項目を太字にしたいのです。どういうわけか、jQueryで正しいアイテムを選択できません...

これが私のコードです。

HTML:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css" />
        <script type="text/javascript" src='script.js'></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
        <title>Tadum</title>
    </head>
    <body>
     <h2>Tadum - The ToDo List</h2>

     <h3>Enter New ToDos</h3>
        <form id="addForm">
            <input type="text" name="ToDoListItem"></input>
        </form>
        <div id="button">Add!</div>
     <h3>Your ToDos</h3>
        <ol class="todolist"></ol>
    </body>
</html>

CSS:

.todolist li{
font-weight: normal;
}
.todolist {
    font-family:garamond;
    color:#cc0000;
}

Javascript

$(document).ready(function() {
    $('#button').click(function(){
        var toAdd = $('input[name=ToDoListItem]').val();
        $('.todolist').append('<li class="item">'+toAdd+'</li>');
        $('#addForm')[0].reset();
    });
    $('ol').sortable();
    $('ol').css('cursor', 'pointer');


    $('.todolist li').dblclick(function(){
       $(this).css('font-weight', 'bold'); 
    });
});

ノート：

どういうわけか.list li、jQuery と CSS スタイルシートの を単純なに置き換えるとうまくいきolます。次に、ダブルクリックすると、リスト内のすべてのアイテムが表示されます (もちろん、これは私が望んでいるものではありません)。<li>しかし、どういうわけか、jQueryでダブルクリックされた個人のみを選択する方法がわかりません...

(これについても、さまざまなバリエーションを試しました。たとえば、「li」のみを使用してダブルクリックされた項目を選択するか、「ol li」または「.item li」を使用します。どれも機能しません。)

4

2 に答える 2

5

dblclick次のように、新しく追加されたリスト項目にイベント ハンドラーをバインドする必要があります。

$(document).on('dblclick', '.todolist li', function(){
    $(this).css('font-weight', 'bold'); 
});

これはスタイルを切り替えるのではなく、ダブルクリックで太字にするだけであることに注意してください。もう一度ダブルクリックしても何も起こりません。

また、JavaScript コードに他の変更を提案する場合: フォームは通常、他のフォームと同じように送信できます。とにかく、この to do リストの目的のために。<form>また、アクセシビリティのために、HTML にラベルを追加しました。

$(document).ready(function() {
    $('#addForm').submit(function(e){
        e.preventDefault();

        $('.todolist').append('<li class="item">' + $('#ToDoListItem').val() + '</li>');
        $(this)[0].reset();
    });

    $('ol').sortable().css('cursor', 'pointer');

    $(document).on('dblclick', '.todolist li', function() {
       $(this).css('font-weight', 'bold'); 
    });
});

HTML

<form id="addForm">
    <label for='ToDoListItem'>Item:</label>
    <input type="text" id="ToDoListItem" />
    <button type='submit'>Add!</button>
</form>
于 2013-01-18T08:21:19.207 に答える
1

ドキュメントの作成後にliアイテムを追加しています。したがって、後で新しく作成されたアイテムのクリックをトリガーできるように、「on」メソッドを使用する必要があります。

$(document).ready(function() {
    $('#addForm').submit(function(e){
        e.preventDefault();

        var toAdd = $('#ToDoListItem').val();
        $('.todolist').append('<li class="item">'+toAdd+'</li>');
        $('#ToDoListItem').reset();
    });

    $('ol').sortable().css('cursor', 'pointer');

    $(document).on('dblclick','li.item',function(){
       $(this).css('font-weight', 'bold'); 
    });
});
于 2013-01-18T08:25:46.023 に答える