要执行列表jquery，请划掉项目

To do list jquery, cross out item

本文关键字：项目 执行 列表 jquery      更新时间：2023-09-26

我正在用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");
  };
});

//我想检查一下这个框是否勾选了。如果是，那么我想插入

标记来交叉该项。但是，此功能不起作用。我也试过（"input"）.is（"：checked"）或（"input"）.prop（"checked"，true），但仍然没有达到我想要的效果。 
$("#check").click(function(){
  var box = $(this);
  $("<del>").insertBefore("<li>");
  $("</del>").insertAfter("</li>");
});

})；

谢谢！！！！！！！！

首先，不能将LI元素附加到div，它应该是UL或OL父元素，并且不能将LI包装在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

要查看是否选中了复选框，可以使用：

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

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

.complete{text-decoration:line-through}

如果checked ，则添加complete类

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