0

我正在研究 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.");
          }
      }
  });
});

链接到笔，如果您想获得更好的视野。

4

1 回答 1

1

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

document.getElementById("aantal_" + dragId).innerHTML++;
于 2020-09-27T19:31:25.230 回答