JQuery - 我可以用 jquery 移动数组元素吗？并将它们存储在另一个数组中？
Posted
技术标签:
【中文标题】JQuery - 我可以用 jquery 移动数组元素吗？并将它们存储在另一个数组中？【英文标题】：JQuery - can i move array elements with jquery? and store them in an other array? 【发布时间】：2021-10-08 19:57:58 【问题描述】：是否可以使用 jquery 移动数组元素？所以如果我点击它，它也会附加到数组中，而不仅仅是在 dom 上？
var cardsInHand = ["1", "2", "3", "4", "5", "6", "7"];
var cardsOnField = [];
const cardsInHandEl = document.querySelector("#cardsInHand-el");
for (var i = 0; i < cardsInHand.length; i++)
cardsInHandEl.innerhtml +=
`
<button>
$cardsInHand[i]
</button>
`
$(document).on("click", "#cardsInHand-el button", function ()
$("#onField-el button")
.remove()
$(this)
.appendTo($("#onField-el"));
)<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<ul id="cardsInHand-el">Cards in Hand: </ul>
<ul id="onField-el"></ul>
<script src="script.js"></script>
</body>【问题讨论】：
jQuery 是作为 UI 插件构建的。您正在尝试做的事情超出了该范围 见array.splice 可以在dom中移动dom元素，也可以在数组中移动数组项。您不能通过移动数组中的项目来移动 dom 中的 dom 元素。 简短回答 - 不。 DOM 中的元素和 JS 数组的内容之间没有“来回”。如果你想实现这样的东西，你应该使用一个 UI 框架，比如 VueJS vuejs.org 【参考方案1】：您可以使用Array#push 将项目推送到数组，并使用Array#splice 在click 事件监听器中移除。
var cardsInHand = ["1", "2", "3", "4", "5", "6", "7"];
var cardsOnField = [];
const cardsInHandEl = document.querySelector("#cardsInHand-el");
for (var i = 0; i < cardsInHand.length; i++)
cardsInHandEl.innerHTML +=
`
<button>
$cardsInHand[i]
</button>
`
$(document).on("click", "#cardsInHand-el button", function()
$("#onField-el button")
.remove()
$(this)
.appendTo($("#onField-el"));
const number = $(this).text().trim();
cardsOnField.push(number);
cardsInHand.splice(cardsInHand.indexOf(number), 1);
/* debugging purposes only */
console.clear();
console.log('Cards in hand: ' + cardsInHand);
console.log('Cards on field: ' + cardsOnField);
)<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<ul id="cardsInHand-el">Cards in Hand: </ul>
<ul id="onField-el"></ul>
<script src="script.js"></script>
</body>【讨论】：
【参考方案2】：这或多或少是 UI 库的做法：
var cardsInHand = ["1", "2", "3", "4", "5", "6", "7"];
var cardsOnField = [];
const cardsInHandEl = document.querySelector("#cardsInHand-el");
const cardsOnFieldEl = document.querySelector("#onField-el");
function render(arr, el)
el.innerHTML = '';
for (var i = 0; i < arr.length; i++)
el.innerHTML +=
`
<button>
$arr[i]
</button>
`
render(cardsInHand, cardsInHandEl);
render(cardsOnField, cardsOnFieldEl);
$(document).on("click", "#cardsInHand-el button", function ()
const number = $(this).text().trim();
cardsOnField.push(number);
cardsInHand.splice(cardsInHand.indexOf(number), 1);
render(cardsInHand, cardsInHandEl);
render(cardsOnField, cardsOnFieldEl);
)<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<ul id="cardsInHand-el">Cards in Hand: </ul>
<ul id="onField-el"></ul>
<script src="script.js"></script>
</body>【讨论】：
UI 库有什么好处？ o： 您不必自己实现代码。一方面，我这样做的方式现在被认为更干净，但另一方面，通过重新渲染整个列表，它会产生一些开销（如果列表和你的一样小，这不是问题）以上是关于JQuery - 我可以用 jquery 移动数组元素吗？并将它们存储在另一个数组中？的主要内容，如果未能解决你的问题，请参考以下文章