0

私は javascript/jquery を初めて使用するので、助けが必要な場合があります。テストボタンをクリックすると、入力フィールドの値とともに、ulを含む新しいliものが本文に追加されます。要素をクリックすると、li削除する必要があります。の中に何もない場合はul、それも削除する必要があります。li順序付けられていないリストを一度作成してから、内部に 's を挿入するコードを作成するにはどうすればよいですか? liまた、それらをクリックしたときに削除するにはどうすればよいですか?

これは私が今持っているコードです:

<input type="text" value="" id="text" />
<input type="button" id="test" value="Test" />

$(document).ready(function(){
    $("#test").click(function(){
        var t = document.getElementById("text").value;
        var UL = document.createElement('ul')
        var LI = document.createElement('li')
        $(UL).attr('id','main-list').appendTo(body)
        $(LI).appendTo("#main-list").text(t)
    });
    $("ul#main-list li").click(function(){
        $(this).remove()
    });
});
4

3 に答える 3

0

別の種類のセレクターが必要です。

$(document).ready(function () {
    i = 0;
    $("#test").click(function () {
        var t = $('#text').val();
        var UL = document.createElement('ul');
        var LI = document.createElement('li');
        $(UL).attr('id', 'main-list' + i).appendTo('body');
        $(LI).text(t).appendTo("#main-list"+i);
        i++;
    });
    $(document).on('click', "ul li", function () {
        $(this).remove();
    });
});

委任イベントとして知られています。正確な名前はわかりませんでした。

ワーキングフィドルリンク。

編集

はid一意である必要があります。

于 2013-02-22T15:03:12.657 に答える
0

ちょっとした変更で十分です。

$("body").on("ul#main-list li", 'click', function(){
    $(this).remove()
});
于 2013-02-22T15:27:43.700 に答える
0

Dream Eater が述べonたように、LI を追加するたびにクリック ハンドラーを追加する場合を除き、使用してクリック イベントを追加する必要があります。

残りの質問を完了するには、いくつかのことを行う必要があります。

リストが空のときにリストも削除する場合は、リスト項目を盲目的に削除することはできません。これを行うには、項目をクリックするたびにリストに残っている項目の数を確認する必要があります。1 つしかない場合は、リストとクリックのアイテムを削除する必要があります。

さらに、テスト ボタンをクリックするたびに新しいリストを作成する場合は、適切なスクリプトが作成されていますが、単一のリストが必要なように思えます。これを行うには、作成する前にリストが存在するかどうかを確認する必要があります。

最後に、jQuery メソッドの構文を利用するようにコードを変更したところ、次のようになりました。

$(document).ready(function(){
    $("#test").click(function(){
        var t = $('#text').val();
        var LI = $('<li/>');

        if($('#main-list').length == 0){
            var UL = $('<ul/>');
            UL.attr('id','main-list');
            $('body').append(UL)
        }
        LI.text(t).appendTo('#main-list');
        LI.appendTo("#main-list").text(t);
    });
    $(document).on('click', "#main-list li", function(){
        if($('#main-list').children('li').length ==1)
        {
            $(this).remove();
            $('#main-list').remove();
        }else{
            $(this).remove();
        }
    });
});

この例は、それがどのように機能するかを示しています。ボタンをクリックするたびにリストが存在するかどうかを最初に確認することで、1 つのリストのみが取得されます。アイテムをクリックしたときにリストに LI が 1 つしかないかどうかを確認することで、「最後のアイテムを削除」のクリックを簡単にキャプチャできます。

ここで最後に提案することは、テキスト ボックスの値が空の場合にエラー トラップを追加することです。

于 2013-02-22T15:25:02.890 に答える