javascript - 为什么我的 html 元素的 id 元素没有被 javascript 正确处理？

问题描述

console.log("var numbers = [");
for (let i = numberOfInputs; i < dlArray.length + numberOfInputs; i++) {
  footer += dlArray[i - numberOfInputs].replace(/[^\d.]/g, "");
  console.log(dlArray[i - numberOfInputs].replace(/[^\d.]/g, ""));
  footer += ",";
  console.log(",");
}
console.log("];");
footer += "];";
footer += "initialize(numbers);";

上面语句的输出如下

var numbers = [
word_match.js:183 3
word_match.js:185 ,
word_match.js:183 1
word_match.js:185 ,
word_match.js:183 4
word_match.js:185 ,
word_match.js:183 2
word_match.js:185 ,
word_match.js:187 ];
word_match.js:203

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev, number) {
  //        ev.dataTransfer.setData("Text", ""+number);
  ev.dataTransfer.setData("Text", ev.target.id);
  ev.dataTransfer.setData("Number", number);
}

function drop(ev, number) {
  ev.preventDefault();

  //            var id = ev.dataTransfer.getData("id");
  //        alert("id " + id);

  //        var num = ev.dataTransfer.getData("Text");

  var data = ev.dataTransfer.getData("Text");
  var num = ev.dataTransfer.getData("Number");

  if (number == num) {
    document
      .getElementById("row" + number)
      .style.setProperty("background", "green");
    document.getElementById("row" + number).style.setProperty("color", "white");
    ev.target.appendChild(document.getElementById(data));
    document.getElementById(data).style.setProperty("background", "green");
    document.getElementById(data).style.setProperty("font-style", "italic");
    document
      .getElementById(data)
      .style.setProperty("border", "0px solid green");
    document
      .getElementById(data)
      .style.setProperty("border-right", "1px solid green");
    //                ev.target.appendChild(document.getElementById("drag"+num));
  }
}

var correctCards = 0;
var totalCount;
var copyNumbers;

function initialize(numbers) {
  copyNumbers = numbers;
  correctCards = 0;
  totalCount = numbers.length;

  for (var i = 0; i < numbers.length; i++) {
    $("#s" + (i + 1))
      .data("number", numbers[i])
      .draggable({
        containment: "#boxstyle",
        cursor: "move",
        revert: true
      });
  }

  // Create the slots
  for (var i = 0; i < numbers.length; i++) {
    $("#t" + (i + 1))
      .data("number", i + 1)
      .droppable({
        hoverClass: "hovered",
        drop: handDrop
      });
  }
}

function handDrop(event, ui) {
  var sourceNumber = $(this).data("number");
  var targetNumber = ui.draggable.data("number");

  if (sourceNumber == targetNumber) {
    ui.draggable.position({ of: $(this), my: "center", at: "center" });
    ui.draggable.draggable("disable");
    $(this).droppable("disable");
    ui.draggable.draggable("option", "revert", false);

    //    $('#d' + targetNumber).css("background", "goldenrod");
    //    $('#d' + targetNumber).css("color", "white");
    //    $('#t' + targetNumber).css("background", "goldenrod");
    $("#d" + targetNumber).css("border-top", "1px solid");
    $("#d" + targetNumber).css("border-bottom", "1px solid");
    $("#d" + targetNumber).css("border-color", "white");
    $("#d" + targetNumber).css("background", "#3F5E17");
    $("#d" + targetNumber).css("color", "white");
    $("#t" + targetNumber).css("background", "#3F5E17");

    document.getElementById("resetButton").style.display = "inline";
    document.getElementById("resetButton").style.visibility = "visible";

    //    $('#t' + targetNumber).css("background", "goldenrod");
    $("#t" + targetNumber).css("color", "white");

    for (var i = 0; i < copyNumbers.length; i++) {
      if (copyNumbers[i] == sourceNumber) break;
    }

    speak($("#s" + (i + 1)).text() + ". " + $("#d" + targetNumber).text());
    // jAlert('Done', "Test");

    correctCards++;
  }

  if (correctCards == totalCount) {
    jAlert("You did it!", "Congratulations");
    document.getElementById("resetButton").style.visibility = "visible";
  }
}

实际的

<div id="boxstyle">
  <h3 id="title">title</h3>
  <center>
    <div class="source">
      <div id="s1" class="draggyBox-small ui-draggable" style="position: relative;">
        k3
      </div>
      <div id="s2" class="draggyBox-small ui-draggable" style="position: relative;">
        k1
      </div>
      <div id="s3" class="draggyBox-small ui-draggable" style="position: relative;">
        k4
      </div>
      <div id="s4" class="draggyBox-small ui-draggable" style="position: relative;">
        k2
      </div>
    </div>
  </center>
  <table id="tablestyle">
    <tbody>
      <tr>
        <td id="row1">
          <div id="t1" class="ltarget ui-droppable"></div>
        </td>
        <td id="d1">
          d3
        </td>
      </tr>
      <tr>
        <td id="row2">
          <div id="t2" class="ltarget ui-droppable"></div>
        </td>
        <td id="d2">
          d1
        </td>
      </tr>
      <tr>
        <td id="row3">
          <div id="t3" class="ltarget ui-droppable"></div>
        </td>
        <td id="d3">
          d4
        </td>
      </tr>
      <tr>
        <td id="row4">
          <div id="t4" class="ltarget ui-droppable"></div>
        </td>
        <td id="d4">
          d2
        </td>
      </tr>
    </tbody>
  </table>
</div>

预期的

<div id="boxstyle">
  <h3 id="title">title</h3>
  <center>
    <div class="source">
      <div id="s1" class="draggyBox-small ui-draggable" style="position: relative;">
        k3
      </div>
      <div id="s2" class="draggyBox-small ui-draggable" style="position: relative;">
        k1
      </div>
      <div id="s3" class="draggyBox-small ui-draggable" style="position: relative;">
        k4
      </div>
      <div id="s4" class="draggyBox-small ui-draggable" style="position: relative;">
        k2
      </div>
    </div>
  </center>
  <table id="tablestyle">
    <tbody>
      <tr>
        <td id="row1">
          <div id="t1" class="ltarget ui-droppable"></div>
        </td>
        <td id="d3">
          d3
        </td>
      </tr>
      <tr>
        <td id="row2">
          <div id="t1" class="ltarget ui-droppable"></div>
        </td>
        <td id="d1">
          d1
        </td>
      </tr>
      <tr>
        <td id="row3">
          <div id="t4" class="ltarget ui-droppable"></div>
        </td>
        <td id="d4">
          d4
        </td>
      </tr>
      <tr>
        <td id="row4">
          <div id="t2" class="ltarget ui-droppable"></div>
        </td>
        <td id="d2">
          d2
        </td>
      </tr>
    </tbody>
  </table>
</div>

从视觉上看，这并没有像预期的那样出现。我希望描述和键并排匹配。然而他们错位了。请看下面的屏幕截图

任何帮助弄清楚如何修复 init 方法将不胜感激。例如，当我将 id 为 s2 的关键元素拖到 id 为 t2 的行元素上时，该元素应放置到位。sourceNumber 和 targetNumber 不正确匹配。

标签： javascripthtml

问题在于调用 handDrop 方法的方式

function initialize(numbers) {
  copyNumbers = numbers;
  correctCards = 0;
  totalCount = numbers.length;
  
  for (var i = 0; i < numbers.length; i++) {
    console.log("'#s' + (i + 1) is matched with "+numbers[i])
    $('#s' + (i + 1)).data('number', numbers[i]).draggable( {
      containment: '#boxstyle',
      cursor: 'move',
      revert: true
    } );
  }

  // Create the slots
    for ( var i = 0; i < numbers.length; i++ ) {
    console.log("'#t' + (i + 1) is matched with "+numbers[i])
    $('#t' + (i + 1)).data('number', numbers[i]).droppable( {
      hoverClass: 'hovered',
      drop: handDrop
    } );
  }
}

目标 t_i 与 s_i 元素不匹配。通过改变

$("#t" + (i + 1))
      .data("number", i + 1)

至

$("#t" + (i + 1))
      .data("number", numbers[i])

我能够解决这个问题。

javascript - 为什么我的 html 元素的 id 元素没有被 javascript 正确处理？

问题描述

解决方案

推荐阅读