（JavaScript和HTML）將項目從一個列表移動到另一個列表

Question

我正在創建一個待辦事項列表，允許用戶添加和刪除任務。 我還希望允許用戶將任何特定任務的副本添加到其他列表中。 例如，我可以單擊一個按鈕，它將創建從（例如列表A）到（例如列表B）的副本（例如任務A）。

我嘗試過這樣做，因此如果您單擊該按鈕，它將在列表中添加一個新類，但是，我不確定是否有更好的方法可以做到這一點。

 $(() => { $('input').on('keypress', function(e) { if (e.keyCode == 13) { const newTask = $(this).val(); if (newTask) { var li = $("<li><input type=" checkbox " id=" newtaskitem " class=" right - margin "><label>test</label> <button type=" button " class=" delete "></button> <button type=" button " class=" addtolist2 "></button></li>"); $('#tasksUL').append(li); $(this).val(""); localStorage.setItem("newtaskUL", value); } } }); $(document).on("click", ".delete", function() { $(this).parent().remove(); }); $(".addtolist2").on("click", function() { $(".addtolist2").css("opacity", 1.5 - $(".addtolist2").css("opacity")); $(".addtolist2").toggleClass("list2UL"); }); }); 

 label[for="list1menu"] { display: none; text-decoration: none; position: absolute; bottom: 250px; left: 250px; width: 680px; height: 540px; } input[name="newtask"] { text-decoration: none; position: absolute; top: 100px; left: 50px; width: 418px; word-wrap: break-word; font-size: 20px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #togglelist1:checked~label[for="list1menu"] { text-decoration: none; position: absolute; display: block; bottom: 55px; left: 9px; width: 500px; height: 860px; } label[for="list2menu"] { display: none; text-decoration: none; position: absolute; bottom: 250px; left: 250px; width: 680px; height: 540px; } ul[class='list2UL'] { margin: 0; padding: 0; position: absolute; top: 142px; left: 50px; list-style-type: none; font-size: 20px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; word-wrap: break-word; width: 355px; } #togglelist2:checked~label[for="list2menu"] { text-decoration: none; position: absolute; display: block; bottom: 55px; left: 9px; width: 500px; height: 860px; } #togglelist2:checked~.list2UL { position: absolute; font-size: 30px; font-weight: 300; left: 85px; top: 5px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #togglecountdown:checked~ul[class='list2UL'] { display: block; position: absolute; font-size: 30px; font-weight: 300; left: 85px; top: 5px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } 

 <input type='checkbox' id="togglelist1" class='list' /> <label for="list1menu"> <input type="text" name="newtask" value="" spellcheck="false" placeholder="New Todo" id="newtask"> <ul id="list1UL"> <li><input type="checkbox" id="newtaskitem" class="right-margin"><label>test</label> <button type="button" class="deletetask"></button> <button type="button" class="addtolist2"></button></li> </ul> </label> <input type='checkbox' id="togglelist2" class='list' /> <label for="list2menu"> <ul id="list2UL"> <li><input type="checkbox" id="newtaskitem" class="right-margin"><label>test</label> <button type="button" class="deletetask"></button></button> </li> </ul> </label> </div> 

Answer 1

$(".addtolist2").on( "click", function() {
    $(".addtolist2").css("opacity", 1.5 - $(".addtolist2").css("opacity"));
    $(".addtolist2").toggleClass("list2UL");

    // clone checked elements
    $('#todolist1 input:checked').parent().clone().appendTo('#todolist2');
});

我沒有辦法對此進行測試，但是應該可以。