JQuery - 我可以用 jquery 移动数组元素吗？并将它们存储在另一个数组中？答案

【问题标题】：JQuery - can i move array elements with jquery? and store them in an other array?JQuery - 我可以用 jquery 移动数组元素吗？并将它们存储在另一个数组中？
【发布时间】：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

标签： javascript html jquery arrays dom

【解决方案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：
您不必自己实现代码。一方面，我这样做的方式现在被认为更干净，但另一方面，通过重新渲染整个列表，它会产生一些开销（如果列表和你的一样小，这不是问题）