1

我的'listmaker' 包含一个文本框和两个按钮。您在文本框中键入一个项目，点击“添加项目”，该项目被推送到一个数组中。完成后，点击完成，一个 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

Could try binding a change event to the checkboxes that removes the item from the array when checked. Ex:

$("#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);
    }
}

Haven't completely checked this code but it should be close.

于 2012-07-25T04:43:25.223 回答
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()（

基本上，我们循环遍历's，然后检查它们内部是否有一个（如果没有，each()长度将是）。liif:checked input0

一旦我们知道我们有li一个选中的复选框，我们就可以从元素.html()中获取一个字符串span，并进行jQuery.inArray()检查，它返回数组中值的索引，或者-1如果它找不到任何.

if它大于或等于零，我们使用该splice()方法删除该索引处的数组项。第二个参数是要删除多少项目。

于 2012-07-25T04:38:37.503 回答
0

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

我稍微改变了应用程序，去掉了 finsh 按钮和 list var。当你输入一个项目时让你按回车。顺便说一句，那个 JQuery 是旧的！

于 2012-07-25T04:39:38.260 回答
0

通过使用该 id 从数组中删除值，将一些 id 添加到列表中。这可能会对您有所帮助。

于 2012-07-25T04:58:27.293 回答
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;
}

查询：

$(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 回答