问题描述
我正在处理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.");
}
}
});
});
解决方法
您可以像增加#aantal_*中的数字那样增加#totaal元素中的数字：
document.getElementById("aantal_" + dragId).innerHTML++;