JavaScript 使用事件将一个元素传输到另一个元素（多次）

Question

我想在 "przenieś" 上 click 之后多次传输整个 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

为您的 button 添加一个 onlclick 侦听器。让它运行一个 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>

JavaScript 使用事件将一个元素传输到另一个元素（多次）

JavaScript transfering one element to another (multiple times) by using event

javascript

events

move

click

button