Javascript |将 div 放到其他 div 上时计算总分和 div 相同分数

Question

我正在做一件 HTML/Javascript 的事情。它显示了一个动物园，您需要将正确的动物 (div) 拖放到正确的笼子 (div) 中。当你这样做时，它应该更新动物园中动物的总数（它使用这段代码），并且也更新你刚刚丢弃的动物数量。我该怎么做？

HTML:

<!DOCTYPE html>
<html>

<head>
    <title>Zoo</title>
    <link href="css/dierentuin.css" rel="stylesheet" type="text/css" />
    <!-- jquery & jquery ui -->
    <script src="js/jquery.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <!-- own js -->
    <script src="js/dierentuin.js"></script>
</head>

<body>
    <div id="wrapper">
        <div id="header">
            <h1>DE DIERENTUIN</h1>
        </div>
        <div id="teller">
            <table>
                <tr>
                    <td>Totaal aantal dieren:</td>
                    <td id="totaal">0</td>
                </tr>
                <tr>
                    <td>aantal giraffen:</td>
                    <td id="aantal_giraffe">0</td>
                </tr>
                <tr>
                    <td>aantal leeuwen:</td>
                    <td id="aantal_leeuw">0</td>
                </tr>
                <tr>
                    <td>aantal apen:</td>
                    <td id="aantal_aap">0</td>
                </tr>
                <tr>
                    <td>aantal pinguins:</td>
                    <td id="aantal_pinguin">0</td>
                </tr>
                <tr>
                    <td>aantal slangen:</td>
                    <td id="aantal_slang">0</td>
                </tr>
            </table>
        </div>
        <div id="zoo">
            <div class="verplaats" id="dieren">
                <img class="drag" id="giraffe" src="afb/giraffe.png" />
                <img class="drag" id="leeuw" src="afb/lion.png" />
                <img class="drag" id="aap" src="afb/monkey.png" />
                <img class="drag" id="pinguin" src="afb/pinguin.png" />
                <img class="drag" id="slang" src="afb/snake.png" />
            </div>
            <div class="zetneer" id="tuin">
                <div class="drop" id="drop_leeuw"></div>
                <div class="drop" id="drop_giraffe"></div>
                <div class="drop" id="drop_aap"></div>
                <div class="drop" id="drop_pinguin"></div>
                <div class="drop" id="drop_slang"></div>
            </div>
        </div>
    </div>
</body>

</html>

Javascript:

let aantalDieren = {
  giraffe: 0,
  leeuw: 0,
  aap: 0,
  pinguin: 0,
  slang: 0,
};

$(document).ready(function() {

  // Make animals draggable
  $(".drag").draggable({
      appendTo: "body",
      helper: "clone",
      revert: "invalid",
  })

  // Make animals droppable
  $(".drop").droppable({
      tolerance: "pointer",
      drop: function(event, ui) {

          var dropId = $(this).attr('id');
          var dragId = ui.draggable.attr("id");

          var id = ui.draggable.attr("id");

          // check is animal was put in the right cage
          if (dropId === 'drop_' + dragId) {
              // if so, show it in sidebar
              aantalDieren[dragId]++;
              document.getElementById("totaal").innerHTML++; 
          }
          // if not, show an alert.
          else {
              alert("De " + id + " hoort hier niet.");
          }
      }
  });
});

Link 到 the pen，如果您想获得更好的视野。

Answer 1

您可以像增加 #totaal 中的数量一样增加 #aantal_* 元素中的数量：

document.getElementById("aantal_" + dragId).innerHTML++;

Javascript |将 div 放到其他 div 上时计算总分和 div 相同分数

Javascript | Counting total and individual scores when dropping div onto other div

html

javascript

drag-and-drop

count

drop