【发布时间】：2021-05-26 01:45:48
【问题描述】：
我有以下问题：
当我拿一张卡片并放入时，我第一次在索引中找到并放入正确的，但第二次我将其放入正确，但随后都按照最后一个进行等等。
这里的代码对我有用，它可能在这里不起作用：
$(document).ready(function() {
$("body").append("<div id='top' </div>");
$("#top").append("<h1> <b>BLACK JACK</b> </h1>");
$("body").append("<div id='buttons' </div>");
$("body").append("<div id='index'> </div>");
$("body").append("<div id='gameDesk' </div>");
$("body").append("<div id='cardsDesk' </div>");
$("#buttons").append(
"<button type='button' id='startGame' class='btn btn-secondary'>Start game</button>"
);
const SuitValue = [
(suit = ["S", "C", "D", "H"]),
(value = [
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"10J",
"10Q",
"10K",
"11A",
]),
];
var cardsArray = [];
var shuffleCards = [];
var playerCards = [];
for (let i = 0; i < value.length; i++) {
for (let j = 0; j < suit.length; j++) {
cardsArray.push(value[i] + suit[j]);
}
}
function shuffle(array) {
var currentIndex = array.length,
temporaryValue,
randomIndex;
// While there remain elements to shuffle...
while (0 !== currentIndex) {
// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
// And swap it with the current element.
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
$("#startGame").click(function() {
$("#buttons").html(
"<button type='button' id='shuffleCards' class='btn btn-secondary'>mix cards</button>"
);
$("#index").html(
"<h5>" + "on the table " + cardsArray.length + " cards" + "</h4>"
);
for (let i = 0; i < cardsArray.length; i++) {
var cards = cardsArray[i];
$("#cardsDesk").append(`<img src="assets/img/cards/${cards}.png" />`);
}
$("#shuffleCards").click(function() {
$("#cardsDesk").remove();
$("body").append("<div id='cardsDesk' </div>");
shuffle(cardsArray);
for (let i = 0; i < cardsArray.length; i++) {
const element = cardsArray[i];
$("#cardsDesk").append(
`<img src="assets/img/cards/card back black.png" />`
);
}
console.log(cardsArray);
$("#buttons").html(
"<button type='button' id='enough' class='btn btn-secondary'>Enough</button>"
);
$("#gameDesk").append("<span class='slot' >drag card here</span>");
dragDrop();
function dragDrop() {
$("img").draggable({
cursor: "grab",
revert: true,
snap: ".slot",
snapMode: "center",
snapTolerance: "",
stack: "img",
});
$(".slot").droppable({
accept: "img",
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function(event, ui) {
$(".slot").droppable("option", "disabled", true);
$("img").draggable("option", "destroy", true);
$(this).find("img").html();
$(ui.draggable).remove();
var imgIndex = $(this).index();
var src = cardsArray[imgIndex];
$(".slot").html(
`<img class="playerCard" src="assets/img/cards/${src}.png" />`
);
$(".playerCard").draggable({
disabled: true,
});
$("<span class='slot' >drag card here</span>")
.droppable()
.appendTo("#gameDesk");
console.log(src);
return dragDrop();
},
});
}
$("#enough").click(function() {});
});
});
});html {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
background-color: darkgreen;
}
#top {
display: flex;
justify-content: center;
background-color: darkgreen;
text-align: center;
}
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
}
#buttons {
display: flex;
justify-content: center;
background-color: darkgreen;
text-align: center;
}
#index {
background-color: darkgreen;
text-align: center;
}
#gameDesk {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
padding-left: 50px;
padding-bottom: 20px;
background-color: darkgreen;
}
.slot {
margin-right: 40px;
margin-bottom: 20px;
background-color: rgb(11, 126, 11);
border-radius: 2px;
text-align: center;
font-size: 1rem;
font-weight: bold;
width: 3rem;
}
#cardsDesk {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
background-color: darkgreen;
max-height: 39rem;
}
img {
height: 7.3rem;
width: 5rem;
}
.imgDrag {
z-index: 1;
opacity: 0.5;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
</body>【问题讨论】：
-
您知道您正试图在此处附加无效的 HTML 吗？