>

사용자가 작업을 추가하고 삭제할 수있는 할 일 목록을 만들고 있습니다. 또한 사용자가 특정 작업의 사본을 다른 목록에 추가 할 수있게하고 싶습니다. 예를 들어 버튼을 클릭하면 (예 : 목록 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>

  • 이전 글꼴 크기를 제한하기 위해 CSS 글꼴 크기 계산을 수정하는 방법
  • 다음 reactjs - React를 사용하여 오디오 요소에서 srcObject를 설정하는 방법