Блог

Главная - Вопросы по программированию - Сброс, куда перемещаются элементы списка в поле ввода

Сброс, куда перемещаются элементы списка в поле ввода

#javascript #jquery

#javascript #jquery

Вопрос:

Уже полночь, и это может показаться неправильным, но я постараюсь..

У меня есть два списка. Один список элементов, которые нужно сделать, а другой — готовых элементов.

У меня есть поле ввода и кнопка, которая добавляет элементы в список дел при нажатии. — Все работает нормально.

У меня есть кнопка, которая переместит все элементы в списке дел в список готовых. — Все это работает нормально, но когда я делаю это, а затем ввожу новый элемент, чтобы добавить его в список дел, теперь все это добавляется в готовый список.

Я знаю, что именно туда я сейчас его перемещаю, но я думал, что возвращаемое значение false сработает, но, увы.

  $ (function (){
  $("#stillToDo").sortable({
    connectWith: "#finished"
  });

  $("#finished").sortable({
    connectWith: "#stillToDo"
  });

  $("#newItemBtn").click(function(){
    let newInput = $("#newItem").val();

    $("#stillToDo").append("<li>"   newInput   "</li>");
    $("#newItem").val("");
    $("#lastUpdated").text("Last updated "   Date()); 
  })

  $("#newItem").keypress(function(event){
    let newInput = $("#newItem").val();
    let keycode = (event.keyCode ? event.keyCode : event.which);

    if(keycode == '13'){
      $("#stillToDo").append("<li>"   newInput   "</li>");
      $("#newItem").val("");
      $("#lastUpdated").text("Last updated "   Date()); 
    }
  });

  $("#allFinished").click (function(){
    $("#finished").append($("#stillToDo"))
  });
});  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sideBar">

    <h2>D-B-To-Do</h2>

    <div id="searchBar" class="input-group col">
      <input class="form-control py-2" type="search" placeholder="Search your items " id="searchInput">
      <span class="input-group-append">
        <button class="btn btn-outline-secondary" type="button">
            <i class="fa fa-search"></i>
        </button>
      </span>
    </div>

    <div class="days">
      <h3>Monday</h3><hr>
    </div>
    <div class="days">
      <h3>Tuesday</h3><hr>
    </div>
    <div class="days">
      <h3>Wednesday</h3><hr>
    </div>
    <div class="days">
      <h3>Thursday</h3><hr>
    </div>
    <div class="days">
      <h3>Friday</h3><hr>
    </div>
    <div class="days">
      <h3>Saturday</h3><hr>
    </div>
    <div class="days">
      <h3>Sunday</h3><hr>
    </div>

  </div>

  <div id="dayInfo" class="container col-6 row align-items-center dayInfo ">
    <div class="card">
      <img id="mondayImg" class="card-img-top" >
      <div class="card-body">
        <h3 class="card-title">Monday</h3>
        <div id="subTitle" class="row">
          <div class="col">
            <h5>Still to do</h5>
            <button id="allFinished" class="btn btn-success">Move all to finished</button><hr>
            
            <ul id="stillToDo">
              <li>test1</li>
            </ul>
            
          </div>
          <div class="col">
            <h5>Finished</h5><button id="allFinished" class="btn btn-danger">Remove finished</button><hr>

            <ul id="finished">
              <li>test2</li>
            </ul>
          </div>
          

        </div>
       <div id="newItemWrapper">
        <input id="newItem" placeholder="Add a new item"><br>
        <h6 id="newItemBtn" class="btn btn-success">Add new item</h6>
        <p class="card-text"><small id="lastUpdated" class="text-muted">Last updated </small></p>
      </div>
      </div>  
    </div>
</div>

Ответ №1:

на самом деле вы добавляете полное ‘#stillToDo ul’ к ‘#finished’, вот почему вы сталкиваетесь с таким странным поведением . , , просто используйте это $ («#finished»).append($(«#stillToDo»).children()); все будет в порядке . . .

 $("#allFinished").click (function(){
    $("#finished").append($("#stillToDo").children());
});

надеюсь, вы поняли это и вам помогло.

Комментарии:

1. Спасибо, я сделал то же самое, только я выбрал li в ul, а не весь ul!

Ответ №2:

Для тех, кому интересно, mindnight — не лучшее время для попыток решить проблему…

Вместо того, чтобы перемещать весь список в готовую стопку, я просто перемещаю существующие элементы списка… Теперь работает отлично!