Как настроить таргетинг на элемент <li>и переход между списками - PullRequest
Новая
       8

Как настроить таргетинг на элемент <li>и переход между списками

0 голосов
/ 17 июня 2019

Я новичок здесь.У меня есть два разных списка в HTML: первый список содержит несколько элементов, второй список не содержит ни одного.

Моя цель - перенести элементы списка 1 в список 2. Я хочу перенести эти элементы, щелкнув по символу «перемещение» (который я разместил).

Однако я делаюне знаю, как нацелить элемент li на передачу.

Я знаю, что это основной вопрос, но все же спасибо за вашу поддержку и время!

Я пытался добавитьEventListener для "перемещения",Поэтому я попытался использовать textContext для изменения списка 2 элементов.Однако я не знаю, как нацелить элемент li в первом списке. 

//FIRST LIST
<ul class="list-group todos mx-auto text-light">
          <li class="list-group-item d-flex justify-content-between align-items-center">
            <span>play mariokart</span>
            <i class="far fa-trash-alt move"></i>
          </li>
          <li class="list-group-item d-flex justify-content-between align-items-center">
            <span>defeat ganon in zelda</span>
            <i class="far fa-trash-alt move"></i>
          </li>

//SECOND LIST
<h1>Items in the Pack</h1>
      <ul class ="pack">
        <li> </li>
        <li> </li>
        <li> </li>
      </ul>

 const list = document.querySelector('.todos');
 const pack = document.querySelector(".pack");


 list.addEventListener('click', e => {

      if(e.target.classList.contains('move')){
       pack.querySelector('li').textContent = `${//missing variable//}%`; 

      }

    }); ```

Ответы [ 2 ]

0 голосов
/ 17 июня 2019

Вы можете использовать parentElement, чтобы получить элемент списка, который является непосредственным родителем элемента с классом move.

Затем вы можете создать новые элементы списка и добавить их в список назначения. Вот поток с небольшими изменениями в вашем коде. 

 const list = document.querySelector('.todos');
 const pack = document.querySelector(".pack");

 list.addEventListener('click', e => {
   if (e.target.classList.contains('move')) {
     let originalListEntry = e.target.parentElement;
     var newListEntry = document.createElement("li")
     newListEntry.innerText = originalListEntry.innerText
     pack.appendChild(newListEntry)
   }
 });

Вот рабочий пример Я добавил + внутри диапазона перемещения для демонстрационных целей.

0 голосов
/ 17 июня 2019

Прежде всего вам нужно закрыть свой первый список с помощью / ul .

поместите класс перемещения в элемент li , содержащий ваши задачи 

<li class="move list-group-item d-flex justify-content-between align-items-center">

тогда этот скрипт должен обрабатывать все. 

<script>
    window.onload = function() {
        document.getElementById('movebutton').addEventListener('click', function() {
            const list = document.querySelector('.todos').getElementsByTagName('li');
            const pack = document.querySelector('.pack');
            for(var x=0; x<list.length; x++) {
                if(list[x].classList.contains('move')) {
                    pack.appendChild(list[x]);
                    x--;
                }
            }
        });
    }
</script>

appendChild автоматически удаляет из исходного списка, поэтому вам нужно x - , чтобы исправить точку, на которую указывает следующий цикл.

и кнопка, которая прикрепляется к слушателю события. 

<button id="move">move</button>

Edit:

Извините, я пропустил ту часть, где вы хотели переместить их по отдельности. Следующее исправляет это, а также гарантирует, что ваши элементы списка сохраняют свой класс и стили и т. Д. Нажмите на текст перемещения, чтобы переместить их.

Кроме того, только что добавлен возврат к исходной функции списка. 

window.onload = function() {
  const list = document.querySelector('.todos');
  const pack = document.querySelector('.pack');
  list.addEventListener('click', function(e) {
    if(e.target.classList.contains('move')) {
      e.target.innerText = " - return";
      li = e.target.parentElement;
      pack.appendChild(li);
    }
  });
  pack.addEventListener('click', function(e) {
    if(e.target.classList.contains('move')) {
      e.target.innerText = " - move";
      li = e.target.parentElement;
      list.appendChild(li);
    }
  });

}
//FIRST LIST
<ul id="first" class="list-group todos mx-auto text-light">
  <li class="list-group-item  d-flex justify-content-between align-items-center">
    <span style="font-weight:bold">play mariokart</span>
    <i class="far fa-trash-alt move"> - move</i>
  </li>
  <li class="list-group-item move d-flex justify-content-between align-items-center">
    <span>defeat ganon in zelda</span>
    <i class="far fa-trash-alt move"> - move</i>
    </li>
</ul>
        
//SECOND LIST
<h1>Items in the Pack</h1>
<ul id="second" class ="pack">
  <li> </li>
  <li> </li>
  <li> </li>
</ul>
...