jQuery待办事项列表

我使用jQuery（和JS当然）编写的简单待办事项列表。我已经创建了静态待办事项列表，只有通过编辑代码才能添加新项目。从逻辑上讲，我现在要创建一个动态列表。jQuery待办事项列表

我已经尝试了一些方法，如.load（）代码从外部文件创建.after（），但这一切都出错了。

你会建议我做什么？

我会很感激，如果你能帮助我解决这个问题。

Gloserio，是的，添加项目现在不工作，因为我所描述的问题的我。

ncubica，问题是，眼下我不能添加新项目到我的清单（仅BU编辑代码）。动态意味着可以添加/删除项目。要做到这一点，我尝试使用.after()方法，里面的函数会复制<li id="item1">List item here</li><li id="buttons1">Buttons here</li>（粗略地说），但它会将所有列表项放在上面，将所有按钮放在最下面。

这是JS代码的一部分：

 <script> 
    // Waiting for the document to load 
     $(document).ready(function() { 
    // Wanted to create a dynamic item list, that's why I used this variable. I thought it would 
    // generate unique IDs (there was 'id++' somewhere in the function I already deleted). 
      var id = 1; 

    // This is going to be used as an action for 'Add Item' button. (It is not a button, actually, it is just <span> with cursor: pointer. Using <a> causes page reload); 
      $('.add').click(function() { 
       $('#item'+id).after(function(i) { // '#item'+id should be something like this in the code: #item2, #item3, etc. 

       }) 
      }) 

    // 'Done' button 
      $('#done1').click(function() { 
       console.log('# "Done" button pressed'); 
       $('#list1').css('background-color','#89f49a').css('border','1px solid #16bf31').css('text-decoration','line-through').css('color','#817f7f').css('font-weight','normal'); 
       console.log('# Item doned successfully'); 
      }); 

    // 'Undone' button (is gonna be renamed to 'Reset'); 
      $('#undone1').click(function() { 
       console.log('# "Undone" button pressed'); 
       $('#list1').css('background-color','').css('border','').css('text-decoration','').css('color','').css('font-weight','normal'); 
      }); 

    // 'Working' button 
      $('#working1').click(function() { 
       $('#list1').css('background-color','#edc951').css('border','1px solid #dda119').css('font-weight','bold').css('color','#000').css('text-decoration','none'); 
      }); 

    // 'Cancel' button 
      $('#cancel1').click(function() { 
       $('#list1').css('background-color','#ff8c8c').css('border','1px solid #ea2c2c').css('font-weight','normal').css('text-decoration','line-through').css('color','#f00'); 
      }); 
    // 'Delete' button 
      $('#del1').click(function() { 
       $('div#dlist1').remove(); 
       $('li#action1').remove(); 
      }); 
     }); 
    </script>

和HTML的一部分：

<div class="list"> 
         <ul id="sortable"> 
          <div class="list-item" id="item1"><div class="spacer1" id="spacer1"></div> 
          <div class="l-element" id="dlist1"><li id="list1" class="ui-widget ui-state-default">Create add feature</div> 
          <li id="action1" class="action"><input type="button" value="Done" class="done" id="done1"><input type="button" value="Undone" class="undone" id="undone1"><input type="button" value="Working" class="working" id="working1"><input type="button" value="Cancel" class="cancel" id="cancel1"><span id="del1" class="delete">Delete</span></li> 
          <div class="spacer"></div></div> 
         </ul> 
        <div>

正如你所看到的，只有1我写的列表项。 ID是静态的，目前无法更改。我只需要改变ID（好吧，它会是var id = 1; id ++）并添加部分代码（在<div class="list-item"之内）

来源

2013-07-22 Artem Ushakov

点击'加item'，它什么都不做，是正常的吗？几个问题：你是什么意思的动态？你目前的问题在哪里？ – Akheloes

对不起，我不明白你的问题是什么..请显示一些代码，我们可以帮助你 – ncubica

为什么不试试jQuery的.clone（）并附加它到“添加项目”的行为？

您可以检查它here。

来源

2013-07-22 18:50:03 miguelcaires

非常感谢！我完全忘了.clone（）方法。它创建新的元素，但不幸的是，任何按钮都不能与创建的元素一起使用。从逻辑上讲，仅仅是因为它与id相关，但即使是 $（'＃undone'+ id）.click（function（）{... 并没有解决新创建的问题:( –

你确定吗？我刚刚在[link]（http://www.strasbourgmeetings.org/ccc）尝试过你的例子，它似乎工作。 – miguelcaires

不，实际上。刚刚尝试了一些代码，并做了一些改进，结果很成功。非常感谢！我的错...... –

我个人也做了一个，它的工作原理非常简单，一个复选框，文本，然后是一个删除按钮。很好用，尽管我仍然在努力让它在关闭浏览器后保存。

jQuery代码：

function addListItem() { 
    var textToAdd = $('#new-text').val();     // The finish class is just for css styling 
    $('#list').append('<li class="item"><input type="checkbox" class="finish" />' + textToAdd + '<button class="delete">Delete</button></li>'); 
    $('#new-text').val(''); 
} 

function deleteItem() { 
    $(this).parent().remove(); 
} 

$(document).ready(function() { 
    $('#add').on('click', addListItem); 
    $(document).on('click', '.delete', deleteItem); 
});

HTML代码：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>To Do List</title> 
     <link rel="stylesheet" href="style.css" /> 
    </head> 
    <body> 

     <h2>To Do List</h2> 
     <p>Project started on <strong>4-1-2015</strong>.</p> 

     <input type="text" id="new-text" /><button id="add">Add</button> 

     <ul id="list"> 

     </ul> 

     <script src="jquery.js" type="text/javascript"></script> 
     <script src="script.js" type="text/javascript"></script> 

    </body> 
</html>

希望这有助于:)

来源

2015-01-04 12:18:54 DF1229

尽管这个链接可能会回答这个问题，但最好在这里包含答案的基本部分，并提供参考链接如果链接页面更改，则仅链接答案可能会失效。 – Ghost

jQuery待办事项列表

回答

相关问题