JavaScript通過使用事件將一個元素轉移到另一個元素（多次）

Question

在click “przenieś”后，我想將整個li從一個div class="listContainer two"轉移到另一個，然后使用JavaScript再次（又一次）進行多次傳輸。 我應該如何以最有效的方式准備JavaScript代碼？

<div class="listContainer two">
  <ul id="list1">
    <li>Item 1 z listy 1 <a class="moveBtn">Przenieś</a></li>
    <li>Item 2 z listy 1 <a class="moveBtn">Przenieś</a></li>
  </ul>
</div>

<div class="listContainer two">
  <ul id="list2">
    <li>Item 1 z listy 2 <a class="moveBtn">Przenieś</a></li>
    <li>Item 2 z listy 2 <a class="moveBtn">Przenieś</a></li>
  </ul>
</div>

Answer 1

你可以試試這個代碼

 <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> <button id="append">click</button> <div class="list"> <div class="listContainer two"> <ul id="list1"> <li>Item 1 z listy 1 <a class="moveBtn">Przenieś</a></li> <li>Item 2 z listy 1 <a class="moveBtn">Przenieś</a></li> </ul> </div> </div> <script> $('#append').click(function(){ $html = $('.list > .listContainer').html(); $('.list').append($html); }); </script> 

Answer 2

將onlclick偵聽器添加到您的button 。 讓它運行一個javascript函數，將li項移至另一個ul 。

 <div class="listContainer two"> <ul id="list1"> <li>Item 1 z listy 1 <button type="button" onclick="buttonClick(this.parentNode);">PrzenieśMe!</button></li> <li>Item 2 z listy 1 <button type="button" onclick="buttonClick(this.parentNode);">PrzenieśMe!</button></li> </ul> </div> <div class="listContainer two"> <ul id="list2"> <li>Item 1 z listy 2 <button type="button" onclick="buttonClick(this.parentNode);">PrzenieśMe!</button></li> <li>Item 2 z listy 2 <button type="button" onclick="buttonClick(this.parentNode);">PrzenieśMe!</button></li> </ul> </div> <script> function buttonClick(li) { var ul = li.parentNode var listOfUl = document.getElementsByTagName('ul'); for(var i = 0; i < listOfUl.length; i++) { if(listOfUl[i].id != ul.id) { listOfUl[i].appendChild(li); } } } </script> 

Answer 3

您可以使用類似這樣的東西。 它不依賴jQuery，如果您需要它在較舊的瀏覽器上運行，則可以將const更改為var並更改matches以檢查目標className 。

 const list1 = document.querySelector('#list1') const list2 = document.querySelector('#list2') const swapListItem = function(e) { // only continue execution if the target is a .moveBtn if (e.target.matches('.moveBtn')) { e.preventDefault() const item = e.target.parentNode const parent = item.parentNode parent.removeChild(item) if (parent === list1) { list2.appendChild(item) } else { list1.appendChild(item) } } } // bind a single event to the window window.addEventListener('click', swapListItem, false) 

 body { font-family: sans-serif } .list { width 40%; float: left; padding: 0; list-style-type: none; color: white } li { padding: 0.5em } #list1 { background: #BADA55 } #list2 { background: #1CE1CE } 

 <ul class="list" id="list1"> <li>Item 1 z listy 1 <a href="#" class="moveBtn">Przenieś</a></li> <li>Item 2 z listy 1 <a href="#" class="moveBtn">Przenieś</a></li> </ul> <ul class="list" id="list2"> <li>Item 1 z listy 2 <a href="#" class="moveBtn">Przenieś</a></li> <li>Item 2 z listy 2 <a href="#" class="moveBtn">Przenieś</a></li> </ul> 

Answer 4

以下是一種利用ES6和實驗性JavaScript功能（在Chrome和Firefox中均提供） closest()的方法：

// 'e' is the Event Object, passed from the later use of
// EventTarget.addEventListener():
function moveBetween(e) {

  // we prevent the default action of clicking an <a>
  // Element:
  e.preventDefault();

  // cache a reference to the clicked element (the 'this'
  // is passed from the EventTarget.addEventListener()):
  let clicked = this,

    // here we use document.querySelectorAll() to retrieve a
    // NodeList of all elements matching the supplied CSS
    // selector, and Array.from() converts that Array-like
    // NodeList into an Array, to allow us to use Array
    // methods:
    lists = Array.from(document.querySelectorAll('ul')),

    // here we use Array.prototype.filter() to remove those
    // Array elements that do not match the passed argument:
    other = lists.filter(

      // this is an Arrow function syntax, and passes the
      // current Array element (the <ul>) of the Array of
      // elements to the assessment.
      // If the closest ancestor 'ul' is not equal to the
      // current <ul> we retain that <ul>, if the closest
      // <ul> is equal to (and therefore *is*) the current
      // <ul> then we discard that <ul> from the Array:
      list => clicked.closest('ul') !== list
    );

  // if the other Array exists (and is truthy) and it
  // has a length property other than zero (so is also
  // truthy):
  if (other && other.length) {

    // we retrieve the first element of that Array,
    // a <ul> element and use Node.appendChild() to
    // to append the closest ancestor <li> of the
    // clicked element to that <ul>:
    other[0].appendChild(clicked.closest('li'));
  }
}

let buttons = Array.from(document.querySelectorAll('.moveBtn'));

buttons.forEach(
  button => button.addEventListener('click', moveBetween)
);

 function moveBetween(e) { e.preventDefault(); let clicked = this, lists = Array.from(document.querySelectorAll('ul')), other = lists.filter( list => clicked.closest('ul') !== list ); if (other && other.length) { other[0].appendChild(clicked.closest('li')); } } let buttons = Array.from(document.querySelectorAll('.moveBtn')); buttons.forEach( button => button.addEventListener('click', moveBetween) ); 

 * { box-sizing: border-box; } li { line-height: 2em; } .moveBtn { color: #f90; } 

 <div class="listContainer two"> <ul id="list1"> <li>Item 1 z listy 1 <a class="moveBtn">Przenieś</a></li> <li>Item 2 z listy 1 <a class="moveBtn">Przenieś</a></li> </ul> </div> <div class="listContainer two"> <ul id="list2"> <li>Item 1 z listy 2 <a class="moveBtn">Przenieś</a></li> <li>Item 2 z listy 2 <a class="moveBtn">Przenieś</a></li> </ul> </div>