我正在为自己的主要项目制作一组迷你游戏，在这个迷你游戏中，我遵循的是以前构建的上一个迷你游戏的相同方法。
在我以前的迷你游戏中，我只有一个PuzzleContainer，但是现在我要制作的只有四个。自从我又添加了三个PuzzleContainers以来，该代码似乎无法正常工作。我在编排时做错了什么吗？谁能告诉我我要去哪里错了？
这是我目前正在开发的迷你游戏的代码。
$(document).ready(function() {
//speech
var progress = 0;
var txt;
$('#complete, #speech').hide();
function eventHandler() {
switch (progress) {
case 0:
txt = "Complete";
break;
case 1:
txt = "Move on to the next minigame";
$('#speech').click(function(){
window.location.href="minigame8.html";
});
break;
}
progress++;
$('#speech').html(txt);
}
$('#speech').click(eventHandler);
// Sortable //
$('#puzzleContainer1', '#puzzleContainer2', '#puzzleContainer3', '#puzzleContainer4').sortable({
update: function() {
var userPieces = '';
$('#puzzleContainer1 li', '#puzzleContainer2 li', '#puzzleContainer3 li', '#puzzleContainer4 li').each(function() {
userPieces += $(this).attr('data');
})
checkResult(userPieces);
}
});
$('#puzzleContainer1', '#puzzleContainer2', '#puzzleContainer3', '#puzzleContainer4').disableSelection();
//shows the "Enterpassword once pieces are all correctly aligned
function checkResult(userPieces) {
if (userPieces == '1234' && '12345' && '123456') {
$("#complete").show(0,function() {
eventHandler()
$('#speech').show();
});
}
}
});#puzzleContainer1 {
position: absolute;
z-index: 5;
top: 10px;
left: 130px;
list-style-type: none;
}
#puzzleContainer2 {
position: absolute;
z-index: 5;
top: 75px;
left: 130px;
list-style-type: none;
}
#puzzleContainer3 {
position: absolute;
z-index: 5;
top: 140px;
left: 130px;
list-style-type: none;
}
#puzzleContainer4 {
position: absolute;
z-index: 5;
top: 205px;
left: 130px;
list-style-type: none;
}
ul, menu, dir {
display: block;
}
.piece{
z-index: 5;
float: left;
margin: 0 10px 0 0;
padding: 0;
}
li {
display: list-item;
text-align: -webkit-match-parent;
}
#complete {
position: absolute;
width: 105px;
height: 25px;
top: 240px;
left: 289px;
background-color: black;
color: white;
font-size: 20px;
padding: 10px;
border-style: solid;
border-width: 5px;
border-color: white;
z-index:5;
}
#speech {
position: absolute;
width: 655px;
height: 100px;
top: 330px;
left: 15px;
background-color: black;
color: white;
font-size: 25px;
padding: 10px;
border-style: solid;
border-width: 5px;
border-color: white;
z-index: 99;
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MAS340</title>
<link href="styles.css" rel="stylesheet" />
<script src="jquery-3.1.1.min.js"></script>
<script src="jquery-ui.js"></script>
<script>
//javascript goes here
</script>
</head>
<body>
<div id="stage">
<ul id="puzzleContainer1" class="ui-sortable">
<li class="piece" data="4"><img src="images/puzzle6/puzzleContainer1/L.png">4</li>
<li class="piece" data="1"><img src="images/puzzle6/puzzleContainer1/redF.png">1</li>
<li class="piece" data="2"><img src="images/puzzle6/puzzleContainer1/A.png">2</li>
<li class="piece" data="5"><img src="images/puzzle6/puzzleContainer1/E.png">5</li>
<li class="piece" data="3"><img src="images/puzzle6/puzzleContainer1/B.png">3</li>
</ul>
<ul id="puzzleContainer2" class="ui-sortable">
<li class="piece" data="3"><img src="images/puzzle6/puzzleContainer2/S.png">3</li>
<li class="piece" data="2"><img src="images/puzzle6/puzzleContainer2/U.png">2</li>
<li class="piece" data="4"><img src="images/puzzle6/puzzleContainer2/T.png">4</li>
<li class="piece" data="1"><img src="images/puzzle6/puzzleContainer2/redR.png">1</li>
</ul>
<ul id="puzzleContainer3" class="ui-sortable">
<li class="piece" data="3"><img src="images/puzzle6/puzzleContainer3/A.png">3</li>
<li class="piece" data="2"><img src="images/puzzle6/puzzleContainer3/N.png">2</li>
<li class="piece" data="4"><img src="images/puzzle6/puzzleContainer3/B.png">4</li>
<li class="piece" data="6"><img src="images/puzzle6/puzzleContainer3/E.png">6</li>
<li class="piece" data="1"><img src="images/puzzle6/puzzleContainer3/redE.png">1</li>
<li class="piece" data="5"><img src="images/puzzle6/puzzleContainer3/L.png">5</li>
</ul>
<ul id="puzzleContainer4" class="ui-sortable">
<li class="piece" data="1"><img src="images/puzzle6/puzzleContainer4/redE.png">1</li>
<li class="piece" data="4"><img src="images/puzzle6/puzzleContainer4/O.png">4</li>
<li class="piece" data="3"><img src="images/puzzle6/puzzleContainer4/H.png">3</li>
<li class="piece" data="2"><img src="images/puzzle6/puzzleContainer4/C.png">2</li>
</ul>
<input id="password" type="text" style="display: block;">
<button id="submit" style="display: block;">Enter Password</button>
<div id="complete">ACCEPTED</div>
<div id="speech"></div>
</div>
</body>
</html>最佳答案
我认为您的选择器有问题。尝试选择拼图容器，如下所示：
$('#puzzleContainer1, #puzzleContainer2, #puzzleContainer3, #puzzleContainer4')
关于javascript - 在JQuery中建立迷你游戏(Javascript)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44388151/