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

你可以使用这样的东西。它对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 2

你可以试试这段代码

<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 3

利用 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>

Answer 4

将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>