待辦事項的jQuery，劃掉項目

我「米做一個非常簡單的待辦事項列表與jQuery我有一個輸入框，添加的東西，一旦進入就會打印出下：待辦事項的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"); 

    }; 

});

//我要檢查，如果選中該複選框如果它是那麼我想插入標籤爲Cr。 oss那件物品。但是這個功能不起作用。我也試過（「input」）。is（「：checked」）or（「input」）。prop（「checked」，true）但仍然沒有做我想要的。

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

    var box = $(this); 

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

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

});

}）;

謝謝!!!!!!!!

來源

2013-12-12 user2393426

您是否嘗試過.wrap（） - 它看起來像所有你想要做的是將一個元素包裝在del標籤中http://api.jquery.com/wrap/ –

首先，你不能將LI元素附加到DIV上， d是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

來源

2013-12-12 23:09:56 adeneo

你能稍微解釋一下{change function（）}部分嗎？有用。謝謝！！！！！ – user2393426

這只是一個事件處理函數，就像'$（'input'）。on（'change'，function ...'，它檢查複選框是否被選中，如果是，那麼它將內部元素封裝在'~~' ，如果它不是它再次解開元素 – adeneo~~

爲什麼它需要解開，否則它不會添加del標籤只是想知道 – user2393426

要查看您的複選框被選中，你可以使用：

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

我建議在你的CSS添加類：

.complete{text-decoration:line-through}

然後添加complete類，如果checked

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

來源

2013-12-12 23:09:51

待辦事項的jQuery，劃掉項目

回答

相關問題