解决移动内容时按钮失效问题：一个深入指南

javascript

2024-03-13 05:48:10

解决移动内容时按钮失效问题：一步一步指南

作为一名程序员，我经常遇到技术难题，需要找出并解决。最近，我遇到了一个特别棘手的问题，涉及到移动内容时按钮失效。幸运的是，我找到了解决问题的办法，我很高兴与大家分享我的发现。

问题

我在一个应用程序中工作，其中涉及移动文本内容。具体来说，当用户从下拉菜单中选择第二个选项并计算新单元格编号时，按钮在第一次工作后停止工作。

解决方法

要解决此问题，我采取了以下步骤：

1. 修复按钮禁用逻辑

一开始，禁用按钮的逻辑是错误的。我将其更改为仅禁用按钮一次，这样它就不会在后续单击中保持禁用状态。

myButton.addEventListener(
  "click",
  () => {
    myButton.classList.add("disabled");
    fill();
  },
  {
    once: true,
  }
);

2. 重置 reOrder 数组

其次，reOrder 数组没有在用户选择第二个选项时重置。我添加了以下代码来重置数组：

myCalculateButton.addEventListener("click", () => {
  // 重置 reOrder 数组
  reOrder = [];

  // 其余代码保持不变
});

完整代码

以下是我修复后问题的完整代码：

$('[name="optionSelection"]').change(function () {
  //clean up the divs inside div with id phrase
  $("#phrase").empty();
});

function showOptions() {
  console.log("hii");
  console.log($("#optionSelection").val());
  var html;
  if ($("#optionSelection").val() == 1) {
    for (i = 0; i < 3; i++) {
      html =
        "<div data-id=" +
        i +
        "><span class='words' data-id=" +
        i +
        ">OptionOne#" +
        i +
        "</span></div>";
      $("#phrase").append(html);
    }
  } else {
    for (j = 0; j < 5; j++) {
      html =
        "<div data-id=" +
        j +
        "><span class='words' data-id=" +
        j +
        ">OptionTwo#" +
        j +
        "</span></div>";
      $("#phrase").append(html);
    }
  }
}

$(".words").draggable({
  revert: function (event, ui) {
    var bRevertingPhrase = this.closest("#drop-em");

    if (!bRevertingPhrase.length) {
      var phraseID = $(this).data("id");
      var phraseHomeID = $(this).parent().data("id");

      //If the child and parent ids don't match, we move the child to the correct parent
      if (phraseID !== phraseHomeID) {
        var correctCell = $("#phrase").find(
          "div[data-id='" + phraseID + "']"
        );
        correctCell.prepend(this);
      }
    }
    return !event;
  },
});
$("#drop-em > div").droppable({
  drop: function (ev, ui) {
    $(ui.draggable)
      .detach()
      .css({ top: 0, left: 0 })
      .appendTo($(this).find(".content:empty"));
    //$("#move-text").addClass("disabled");
  },
});
$("#phrase > div").droppable({
  drop: function (ev, ui) {
    $(ui.draggable).detach().css({ top: 0, left: 0 }).prependTo(this);
  },
});

const myButton = document.querySelector("#move-text");
myButton.addEventListener(
  "click",
  () => {
    myButton.classList.add("disabled");
    fill();
  },
  {
    once: true,
  }
);

var reOrder = [];
function fill() {
  const cells = document.querySelectorAll("#phrase > div > span");
  var newLoc = "";
  //myButton.classList.add("disabled");

  cells.forEach((cell, index) => {
    newLoc = document.querySelector(
      ".item:nth-child(" + reOrder[index + startPos - 1] + ") .content "
    );
    newLoc.append(cell);
    newLoc.classList.add("moved");
  });
}
function reArrange() {
  var limit1 = 85;
  var limit2 = 91;

  for (let loop = 0; loop < 8; loop++) {
    for (let i = 0; i < 6; i++) {
      reOrder.push(limit1 + i);
    }
    limit1 = limit1 - 12;
  }
  for (let loop = 0; loop < 8; loop++) {
    for (let j = 0; j < 6; j++) {
      reOrder.push(limit2 + j);
    }
    limit2 = limit2 - 12;
  }
}
reArrange();

/* get cell number */

const myRow = document.querySelector("#inp1");
const myCol = document.querySelector("#inp2");
var startPos = 0;
const myCalculateButton = document.querySelector("#calculate");
const myAnswer = document.querySelector("#cellnum");
myCalculateButton.addEventListener("click", () => {
  var rowNumber = myRow.value.toUpperCase();
  var colNumber = myCol.value;
  var result = 0;
  switch (rowNumber) {
    case "A":
      rowNumber = 42;
      break;
    case "B":
      rowNumber = 36;
      break;
    case "C":
      rowNumber = 30;
      break;
    case "D":
      rowNumber = 24;
      break;
    case "E":
      rowNumber = 18;
      break;
    case "F":
      rowNumber = 12;
      break;
    case "G":
      rowNumber = 6;
      break;
    case "H":
      rowNumber = 0;
      break;
  }

  if (colNumber < 7) {
    result = rowNumber + parseInt(colNumber);
  } else {
    result = rowNumber + 42 + parseInt(colNumber);
  }
  myAnswer.innerHTML = result;
  startPos = result;

  // 重置 reOrder 数组
  reOrder = [];
});