Question

我正在使用jquery创建一个非常简单的待办事项列表。我有一个用于添加内容的输入框，一旦输入它将打印出下面的内容：

HTML：

    <html>
          <head>
             <title>My to-do list</title>
             <link rel="stylesheet" href="css/list.css" >
         </head>

        <body>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="js/list.js"></script>
  <div id="empty-top"></div>
  <div align= "center" class="wrapper">
    <h2>Add thing to your to-do list</h2>
    <input id='input' type="text" placeholder="To-do-list" >
  </div>

  <div class = "things">

  </div>

        </body>
   </html>

我的js文件：

$(function(){

  $("#input").keypress(function(e){

if(e.which == 13){

  var content = $("#input").val();

  $("<li>" + content + "<input id= 'check' type='checkbox'> </li>").appendTo(".things");

  };

});

//我想检查是否选中了该框。如果是，那么我想插入标签来跨越该项目。但是这个功能不起作用。我也试过（“输入”）。是（“：checked”）或（“输入”）.prop（“checked”，true）但仍然没有做我想要的。

$("#check").click(function(){

  var box = $(this);

  $("<del>").insertBefore("<li>");

  $("</del>").insertAfter("</li>");

});

}）;

谢谢!!!!!!!!

Answer 1

首先，你不能将LI元素附加到DIV，它应该是UL或OL父元素，并且你不能将DEL包装在DEL中，因为DEL元素不能是一个子元素UL，因此您必须包装内部元素，并在再次取消选中该复选框时将其解包。

对于事件处理程序，您可以在创建元素时附加它，并且您应该监听更改事件等。

$(function () {
    $("#input").keypress(function (e) {
        if (e.which == 13) {
            var content = $("#input").val();
            var li  = $('<li />', {
                    text : this.value
                }),
                inp = $('<input />', {
                    'class': 'check',
                    type   : 'checkbox',
                    on : {
                        change: function() {
                            if (this.checked) {
                                $(this).closest('li').wrapInner('<del />');
                            }else{
                                $(this).unwrap();
                            }
                        }
                    }
                });
            $('.things').append( li.append(inp) );
        };
    });
});

FIDDLE

Answer 2

要查看您的复选框是否已选中，您可以使用：

$("input").get(0).checked

我建议在CSS中添加一个类：

.complete{text-decoration:line-through}

然后添加complete类，如果checked

if($("input").get(0).checked){
   $('corresponding-list-item').addClass('complete');
}

要列出jquery，请删除项目

2 个答案: