Question

将节点值列表合并到一个数组中时遇到问题。我想要一个值数组，并在单击按钮时对其进行更新。

我使用了forEach方法，然后在嵌套Array.from（）方法的地方起作用。我获得了一些数组，数量取决于我有多少个节点。

html代码：

<li>
  <button class="add">+</button>
  <span class="amount" id = "amount0">0</span>
  <button class="substract">-</button>
</li>
<li>
  <button class="add">+</button>
  <span class="amount" id = "amount1">0</span>
  <button class="substract">-</button>
</li>

以此类推...

JS代码：

function addAmount(el) {
  let amountElement, adjustAmount;

  if (el.classList.contains("add")) {
    adjustAmount = 1;
    amountElement = el.nextElementSibling;
  } else {
    adjustAmount = -1;
    amountElement = el.previousElementSibling;
  }

  if (amountElement.innerText >= 0) {
    amountElement.innerText =
      parseInt(amountElement.innerText) + adjustAmount;
  } else {
    amountElement.innerText = 0;
  }
}

function ordered() {
    const amount = document.querySelectorAll(".amount");
    amount.forEach(function(order) {
      let myArrays = Array.from(order.innerText);
      console.table(newArrays);
      console.log(order);
    });
  }
document.addEventListener("click", ordered);
document.addEventListener('click', e => {
  if (e.target.tagName == "BUTTON") {
    addAmount(e.target);
  } else {
    console.log(e.target.tagName);
  }
});

此代码在控制台的两个节点中返回

<span class="amount" id = "amount">0</span>

和两个数组：

["0"]

正在更新。但是，如果value的数量大于10，则数组开始将tens的数量和unitity的数量分成数组中的两个项目，例如：

["1","0"]

但是我想得到一项[“ 10”]。节点的值正在正确更新。

function addAmount(el) {
  let amountElement, adjustAmount;

  if (el.classList.contains("add")) {
    adjustAmount = 1;
    amountElement = el.nextElementSibling;
  } else {
    adjustAmount = -1;
    amountElement = el.previousElementSibling;
  }

  if (amountElement.innerText >= 0) {
    amountElement.innerText =
      parseInt(amountElement.innerText) + adjustAmount;
  } else {
    amountElement.innerText = 0;
  }
}

function ordered() {
    const amount = document.querySelectorAll(".amount");
    amount.forEach(function(order) {
      let myArray = Array.from(order.innerText);
      console.log(myArray);
      console.log(order);
    });
  }
document.addEventListener("click", ordered);
document.addEventListener('click', e => {
  if (e.target.tagName == "BUTTON") {
    addAmount(e.target);
  } else {
    console.log(e.target.tagName);
  }
});

<li>
  <button class="add">+</button>
  <span class="amount" id = "amount0">0</span>
  <button class="substract">-</button>
</li>
<li>
  <button class="add">+</button>
  <span class="amount" id = "amount0">0</span>
  <button class="substract">-</button>
</li>

Answer 1

只需将值推入数组并将其连接。尝试这样

function addAmount(el) {
  let amountElement, adjustAmount;

  if (el.classList.contains("add")) {
    adjustAmount = 1;
    amountElement = el.nextElementSibling;
  } else {
    adjustAmount = -1;
    amountElement = el.previousElementSibling;
  }

  if (amountElement.innerText >= 0) {
    amountElement.innerText =
      parseInt(amountElement.innerText) + adjustAmount;
  } else {
    amountElement.innerText = 0;
  }
}

function ordered() {
    const amount = document.querySelectorAll(".amount");
    var unit = [];
    amount.forEach(function(order) {
      let myArrays = Array.from(order.innerText);
      unit.push(myArrays);
      console.log(order);
    });
    console.log(unit.join(''));
  }

document.addEventListener('click', e => {
  if (e.target.tagName == "BUTTON") {
    addAmount(e.target);
  } else {
    console.log(e.target.tagName);
  }
});
document.addEventListener("click", ordered);

<li>
  <button class="add">+</button>
  <span class="amount" id = "amount0">0</span>
  <button class="substract">-</button>
</li>
<li>
  <button class="add">+</button>
  <span class="amount" id = "amount1">0</span>
  <button class="substract">-</button>
</li>

如何在Javascript中将节点值列表合并到一个数组中？

1 个答案: