我只需要知道一些事情。我在jQuery中有这样的代码：
$(function() {
$("#draggable").draggable();
var place = 0;
var body = 0;
$('#cables').hide();
$(".droppable").droppable({
drop: function(event, ui) {
$(this).addClass("ui-state-highlight");
if(place === 0) {
if(this.id == "mo") {
place ++;
body ++;
$('#draggable').css({
'background-color':'#00FF00',
});
$('#draggable').text('Grafická karta');
}
else {
place++;
$('#draggable').css({
'background-color':'#FF0000 ',
});
$('#draggable').text('Grafická karta');
}
}
else if (place === 1) {
if(this.id == "gp") {
place ++;
body ++;
$('#draggable').css({
'background-color':'#00FF00',
});
$('#draggable').text('Processor');
}
else{
place++;
$('#draggable').css({
'background-color':'#FF0000 ',
});
$('#draggable').text('Processor');
}
}
else if (place === 2) {
if(this.id == "cp") {
place ++;
body ++;
$('#draggable').css({
'background-color':'#00FF00',
});
$('#draggable').text('RAM');
}
else {
place++;
$('#draggable').css({
'background-color':'#FF0000 ',
});
$('#draggable').text('RAM');
}
}
else if (place === 3) {
if(this.id == "ra") {
place ++;
body ++;
$('#draggable').css({
'background-color':'#00FF00',
});
$('#draggable').text('HDMI');
$('#cables').fadeIn();
}
else {
place++;
$('#draggable').css({
'background-color':'#FF0000 ',
});
$('#draggable').text('HDMI');
$('#cables').fadeIn();
}
}
else if (place === 4) {
if(this.id == "hdmi") {
place ++;
body ++;
$('#draggable').css({
'background-color':'#00FF00',
});
$('#draggable').text('X');
}
else {
place++;
$('#draggable').css({
'background-color':'#FF0000 ',
});
$('#draggable').text('X');
}
}
},
over: function(event, ui) {
}
});
});
这是HTML5标记：
<!doctype html>
<html lang="cs" dir="ltr">
<head>
<title>Hardware</title>
<link rel='stylesheet' type='text/css' href='graph/design.css'>
<link rel='shortcut icon' type='image/x-icon' href='favicon.ico'>
</head>
<body>
<span class="display"></span>
<section id='game'>
<article id='draggable'>
Základní deska
</article>
<article id='images'>
<?php require('cont/kabely.php') ?>
<table>
<tr>
<td><img src='graph/motherboard.png' id='mo' class="droppable ui-widget-header"></td>
<td><img src='graph/cpu.png' id='cp' class="droppable ui-widget-header"></td>
<td><img src='graph/gpu.png' id='gp' class="droppable ui-widget-header"></td>
<td><img src='graph/ram.png' id='ra' class="droppable ui-widget-header"></td>
</tr>
</table>
</article>
</section>
<script type='text/javascript' src='scripts/jquery.js'></script>
<script type='text/javascript' src='scripts/ui.js'></script>
<script type='text/javascript' src='scripts/cookie.js'></script>
<script type='text/javascript' src='scripts/external.js'></script>
</body>
</html>
外部是
<table id='cables'>
<tr>
<td><img src='graph/hdmi.png' id='hdmi'></td>
<td><img src='graph/lan.png' id='la'></td>
<td><img src='graph/napajeci.png' id='na'></td>
<td><img src='graph/rca-composite.png' id='rc'></td><tr>
<td><img src='graph/vga.png' id='vg'></td>
<td><img src='graph/usb2.png' id='u2'></td>
<td><img src='graph/jack.png' id='ja'></td>
<td><img src='graph/usb3.png' id='u3'></td><tr>
</tr>
</table>
那么问题出在哪里：
我正在尝试制作一个应用程序，让人们抓住标志并将其放在图像上（jQuery ui Draggable）。它一直有效，直到我到达代码的这一部分：
else if (place === 4) {
if(this.id == "hdmi") {
place ++;
body ++;
$('#draggable').css({
'background-color':'#00FF00',
});
$('#draggable').text('X');
}
else {
place++;
$('#draggable').css({
'background-color':'#FF0000 ',
});
$('#draggable').text('X');
}
}
为了完成这项工作，我需要在文件和id所在的html外部文件中。所以他们会完成第一个"关卡"，然后进入另一个关卡，所以有些图片会隐藏起来，有些会显示出来。它们表现得很好，但对jQuery代码没有反应。有人能帮我吗？他们正在像jQuery中那样做出反应，如果place==1。。。从位置==4开始的所需图片。我希望这是可以理解的。
感谢所有会做出反应的人。
<tr>
<td><img src='graph/motherboard.png' id='mo' class="droppable ui-widget-header"></td>
<td><img src='graph/cpu.png' id='cp' class="droppable ui-widget-header"></td>
<td><img src='graph/gpu.png' id='gp' class="droppable ui-widget-header"></td>
<td><img src='graph/ram.png' id='ra' class="droppable ui-widget-header"></td>
</tr>
你只有4项而不是5项。因此place == 4将不工作