【发布时间】：2016-02-24 01:31:18
【问题描述】：
我只需要知道一些事情。我在 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 代码做出反应。谁能帮我 ？如果 place ==1 ... 所需的图片从 place == 4 开始。我希望这是可以理解的。
感谢所有愿意做出反应的人。
【问题讨论】：
-
您需要缩小问题范围，只提供真正相关的代码/只提供必要的代码