根据数组索引重新渲染“副本”按钮答案

【问题标题】：Re-render 'replica' buttons based on array index根据数组索引重新渲染“副本”按钮
【发布时间】：2020-12-12 04:32:29
【问题描述】：

我有一个有 14 个按钮的应用程序。当您单击任何按钮时，这会创建另一个具有相同内部文本的按钮。

所有预先存在的按钮都有一个数字类，可以帮助我遍历它们。我正在尝试这样做，以便当单击其中两个或更多按钮时，它会按从左到右的升序组织新的“副本”按钮。

就目前而言，我的代码对前两个“副本”按钮进行了正确排序，但是当您总共单击三个或更多预先存在的按钮时，它会忽略该顺序。

我怀疑发生这种情况是因为一旦按钮最初呈现，循环就会中断，但我无法解决这个问题。你能帮忙吗？

这是我认为导致问题的代码部分：

function orderButtons(array) {

for (i in array) {
let sideElements = array[i];
  if (array.length >= 2) {
   sortNumbers(array);

   /*let classArray = this.className.split(' ')
   let buttonNum = +(classArray[0]);
   let index = sideArray.indexOf(buttonNum);*/

     choiceButtons(sideButtons[sideElements].textContent);
     console.log(array);

  }
 }
}

编辑：这是可能导致问题的另一部分代码：

function choiceButtons(innerText) {

  //create button

if (intervalArray.indexOf(innerText) === -1) {
  let choiceBtn = document.createElement("BUTTON");
  //chooseDiv.style.visibility ="hidden";

//document.getElementById('start-button').disabled = true;  //add inner text to choice buttons
  choiceBtn.textContent = innerText;

  //append to choice-buttons-div
  document.getElementById("choice-buttons-div").appendChild(choiceBtn);
  choiceBtn.className = "choice-buttons";
      //push innerText to array
    intervalArray.push(innerText);
      console.log(intervalArray);
      let childNodes = chooseDiv.childNodes;
      console.log(intervalArray);

    }
  }

这是笔：https://codepen.io/david-webb/pen/abNmbVm?editors=1010

我添加了一个清除功能来暂时删除按钮。然后我调用 orderButtons 函数来尝试重新渲染按钮，但这没有奏效。

【问题讨论】：

标签： javascript arrays sorting dom createelement

【解决方案1】：

根据您的代号，似乎您始终清除了两个以上的按钮时清除“副本”：

if (sideArray.length > 2) {
    document.getElementById('clear').click();
    orderButtons(sideArray);
}

此外，您的清除功能仅删除 DOM 节点，但永远不会清除您在 choiceButtons 中使用的 intervalArray 以生成您的“副本”

【讨论】：

感谢 qphi。我这样做是为了尝试使用 orderButtons 函数重新渲染按钮。这是因为如果没有这个 clear 函数，它只会以正确的（升序）顺序呈现前两个按钮。如果我清除 intervalArray，我看不出会有什么不同——即使没有它，按钮仍然会被渲染。你能解释一下吗？
为了说明您突出显示的部分的要点，我已将其注释掉。但是，我在渲染顺序方面仍然遇到同样的问题。
您可能应该创建一个renderNodes() 函数，该函数使用intervalArray 渲染所有副本（将它们附加到#choice-buttons-div），仅使用choiceButtons() 将按钮插入intervalArray。当您单击“repicable”按钮时，首先调用removeAllChildNodes()，然后根据需要调用choiceButtons()，按类名对intervalArray 进行排序，最后调用renderNodes()。在这种情况下，clear() 将仅用于删除所有节点并重置 intervalArray