1

私の「リストメーカー」には、1つのテキストボックスと2つのボタンが含まれています。テキストボックスに項目を入力し、[項目の追加]をクリックすると、項目が配列にプッシュされます。完了したら、finishを押すと、divにアイテムのリストが表示されます。各リスト項目にもチェックボックスがあります。チェックボックスがオンになっているリストアイテムを削除したいのですが、できれば別のボタンをクリックして「チェックされたアイテムを削除」しますが、必須ではありません。

これがhtmlです：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
        <script src='script.js'></script>
        <title>Listmaker</title>
    </head>
    <body>
    <form>
        <input type="text" id="add" />
        <button type="button" name="addItem" id="addItem">Add Item</button>
        <button type="button" name="finish" id="finish">Finish</button> 
        </form>
        <div>
            <ol id="list">
            </ol>
            <button type="button" name="lineThrough" id="lineThrough">Remove Checked Items</button>
        </div>
    </body>
</html>

そしてjQuery：

$(document).ready(function() {
        var list = [];
        $('#add').focus();

    $('#addItem').click(function() {
        list.push($('#add').val());
        $('#add').val('');
        $('#add').focus();
    });

    $('#finish').click(function() {
        for(i=0; i<list.length; i++) {
        $('#list').append('<li><input type="checkbox" class="unchecked"/>' +list[i]+ '</li>');
        }
    });

});

私は過去数時間にわたってさまざまな方法でそれを試しましたが、私は正しい軌道に乗っているとは思わないので、上記のコードに私の試みを含めませんでした。チェックボックスと、それが含まれている配列アイテムのarray.remove（）を反復処理する方法に頭を悩ませることはできません。どんな助けでも大歓迎です。

4

6 に答える 6

0

そのIDを使用してリストにIDを追加し、配列から値を削除します。これはあなたを助けるかもしれません。

于 2012-07-25T04:58:27.293 に答える
0

http://jsfiddle.net/WGKHG/1/を参照してください 

$(document).ready(function() {
        var list = [];
        $('#add').focus();

    $('#addItem').click(function() {
        list.push($('#add').val());
        $('#add').val('');
        $('#add').focus();
    });

    $('#finish').click(function() {
        var ids=Array();
        $('#list li').each(function(){
            if($(this).find("input:checked").length>0)
            {

                ids.push( 1 * $(this).attr("id").split("_")[1]);
                //alert("checked "+ids);
            }
        });

        for(var i=ids.length;i>0;i--)
        {
           //alert("checked "+ids);
           list.splice(ids[i-1],1);
        }

        $('#list').html("");

        for(i=0; i<list.length; i++) {

        $('#list').append('<li id="li_'+i+'" ><input type="checkbox" class="unchecked"/>' +list[i]+ '</li>');
        }
    });

});
于 2012-07-25T04:37:28.260 に答える
0

デモ：http：//jsfiddle.net/GKnHG/1/

この方法を使用できます.splice()。

$('li').each(function() {
  if($(this).find('input:checked').length) {
     var val = $(this).find("span").html();
     var index = $.inArray(val, list);
     if (index >= 0) {
        list.splice(index, 1);
     }
  }
});
buildList();

リストビルドを別の関数（buildList()）に移動しました。これは、終了ボタンがクリックされたときに呼び出されるため、上記のブロックの最後にあります。

each()基本的に、 「」をループして、内部にあるかどうかliを確認します（長さは存在しない場合になります）。if:checked input0

チェックボックスがオンになっていることがわかったら、要素から文字列を取得し、配列内の値のインデックスを返すチェックliを実行できます。チェックボックスが見つからない場合は、 。.html()spanjQuery.inArray()-1

ifゼロ以上の場合は、このsplice()メソッドを使用して、そのインデックスの配列アイテムを削除します。2番目の引数は、削除するアイテムの数です。

于 2012-07-25T04:38:37.503 に答える
0

http://jsfiddle.net/MpBZp/1/

アプリを少し変更し、finshボタンとリスト変数を削除しました。アイテムを入力するときにEnterキーを押してみましょう。ところで、そのJQueryは古いです！

于 2012-07-25T04:39:38.260 に答える
0

チェックされたときに配列からアイテムを削除するチェックボックスに変更イベントをバインドしてみてください。元：

$("#list").on( "change", "input.checkbox", function() {
    var $this = $(this);
    if ( $this.is(":checked") ) {
        removeFromArray( $this.val(), list );
    }
});

function removeFromArray( value, list ) {
    var index;
    if ( list == null ) {
        return;
    }
    index = list.indexOf(value);
    // Handle edge case so we dont do a range of 0 to -1
    if ( index !== -1 ) {
        list.splice(index, 1);
    }
}

このコードを完全にチェックしていませんが、近いはずです。

于 2012-07-25T04:43:25.223 に答える
0

ここで私は上記の問題の完全な解決策を実行しました。

デモ： http ：//codebins.com/bin/4ldqp9n

HTML：

<div id="panel">
  <input type="text" id="add" />
  <button name="addItem" id="addItem">
    Add Item
  </button>
  <div>
    <ol id="list">
    </ol>
    <button type="button" name="lineThrough" id="lineThrough">
      Remove Checked Items
    </button>
  </div>
</div>

CSS：

input#add{
  border:1px solid #55669a;
}
button{
  border:1px solid #55669a;
}
button:hover{
  background:#acacac;
}
ol{
  padding:2px;
  border:1px solid #7788a9;
  background:#a2a5fd;
  display:none;
}
ol li{
  list-style:none;
}

JQuery：

$(function() {
    $("#add").focus();
    var list = new Array();
    //Add New Item 
    $("#addItem").click(function() {
        if ($.trim($("#add").val()) != "") {
            list.push($.trim($("#add").val()));
            $("#list").append("<li><input type='checkbox' value='" + (list[list.length - 1]) + "'/>" + list[list.length - 1] + "</li>");
            $("#add").val('');
            if (list.length > 0) {
                $("#list").show(800);
            }

        }

    });
    //Remove Checked Item
    $("#lineThrough").click(function() {
        $("#list input:checked").each(function() {
            var index = $.trim($("#list input:checkbox").index(this));
            list.splice(index, 1);
            $("#list li:eq(" + index + ")").remove();
            if (list.length <= 0) {
                $("#list").hide('fast');
            }
        });
    });
});

デモ： http ：//codebins.com/bin/4ldqp9n

于 2012-07-25T11:44:47.570 に答える