JQuery

Question

是否可以使用 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>

Answer 1

您可以使用 Array#push to push the item to the array and 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>

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

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

JQuery - can i move array elements with jquery? and store them in an other array?

html

javascript

arrays

dom