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待辦事項列表

回答

相關問題