时间戳

首页 > 解决方案 > 根据数组索引重新渲染“副本”按钮

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

问题描述

我有一个有 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 函数来尝试重新渲染按钮，但这没有奏效。

标签： javascriptarrayssortingdomcreateelement

解决方案

根据您的Codepen，选择两个以上的按钮时，您似乎总是清除“副本”：

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

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

推荐阅读