如何将项目从一个列表复制/复制到另一列表

时间:2019-07-20 03:57:09

标签: javascript html css google-chrome-extension

我想知道如何复制一个特定列表并将其添加到多个UL。我试图做到这一点,以便当用户单击按钮时,它将把任务添加到列表1和列表2。

Flutter upgrade

1 个答案:

答案 0 :(得分:0)

以下是您的问题的解决方案:https://jsfiddle.net/t09e8326/2/

您在代码中犯了很多错误,例如未附加到第二个列表。尝试附加超出全局范围的 el 元素。

HTML:

  <label for="list1menu">
    <input type="text" name="newlist1" value="" spellcheck="false" placeholder="New List" id="newlist1">
    <ul id="list1UL">
      <li><input type="checkbox" id="newlist1item" class="right-margin"><label>List1</label> <button type="button" class="deletelist"> Delete</button> <button type="button" class="addtolist2">Add to List2</button></li>
    </ul>
  </label>

<label for="list2 menu">
  <ul id="list2UL" class='list2UL'>
    <li><input type="checkbox" id="newlist2item" class="right-margin"><label>List2</label> <button type="button" class="deletelist">Delete</button></li>
  </ul>
</label>

脚本:

  $(() => {
      $('#newlist1').on('keypress', function(e) {
        if (e.keyCode == 13) {
          const newList1 = $(this).val();
          if (newList1) {
            var li = "<li><input type='checkbox' id='newlist1item' class='right-margin' <label>" + newList1 + "</label> <button type='button' class='deletelist'> Delete</button> <button type='button' class='addtolist2'>Add to List 2</button></li>";
            $('#list1UL').append(li);
            $('#list2UL').append(li);
            $(this).val("");
          }
        }
      });
      $(document).on("click", ".deletelist", function() {
        $(this).parent().remove();
      });
    });