我有一些代码的编码者。翻牌按预期工作,但不能使洗牌部分工作。图像消失了。背面图像(图像2-5)将消失,直到页面重置,而不是混洗到其他卡。我不知所措。
它的工作原理是当我点击随机按钮时,图像2-5在页面加载或按下按钮时随机移动到其他卡片的背面。对于我哪里出了问题,任何帮助都将不胜感激。
下面是我使用的代码
function shuffle() {
$(".shuffleImg").each(function() {
var divs = $(this).find(".images");
for (var i = 0; i < divs.length; i++) $(divs[i]).remove();
var i = divs.length;
if (i == 0) return false;
while (--i) {
var j = Math.floor(Math.random() * (i + 1));
var tempi = divs[i];
var tempj = divs[j];
divs[i] = tempj;
divs[j] = tempi;
}
for (var i = 0; i < divs.length; i++) $(divs[i]).appendTo(this);
});
}
});
发布于 2019-06-04 03:15:54
您正在将div附加到文档的另一部分
<div class="container shuffleImg">
在……旁边
<div class="row">
因为您在appendTo
中使用了参数this
。您应该为每张卡添加一个ID,然后选择use it to call the appendTo
<div class="container shuffleImg">
<div class="row">
<div class="col">
<div class="card-container manual-flip">
<div class="card box" onclick="rotateCard(this)" id="cardbox1">
<div class="front">
<img src="https://via.placeholder.com/150?text=Image 1" />
</div>
<div class="back images">
<img src="https://via.placeholder.com/150?text=Image 2" />
</div>
</div>
</div>
</div>
<div class="col">
<div class="card-container manual-flip">
<div class="card box" onclick="rotateCard(this)" id="cardbox2">
<div class="front">
<img src="https://via.placeholder.com/150?text=Image 1" />
</div>
<div class="back images">
<img src="https://via.placeholder.com/150?text=Image 3" />
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card-container manual-flip">
<div class="card box" onclick="rotateCard(this)" id="cardbox3">
<div class="front">
<img src="https://via.placeholder.com/150?text=Image 1" />
</div>
<div class="back images">
<img src="https://via.placeholder.com/150?text=Image 4" />
</div>
</div>
</div>
</div>
<div class="col">
<div class="card-container manual-flip">
<div class="card box" onclick="rotateCard(this)" id="cardbox4">
<div class="front">
<img src="https://via.placeholder.com/150?text=Image 1" />
</div>
<div class="back images">
<img src="https://via.placeholder.com/150?text=Image 5" />
</div>
</div>
</div>
</div>
</div>
</div>
在Javascript代码中
for (var i = 0; i < divs.length; i++){
$(divs[i]).appendTo($('#cardbox'+(i+1)));
}
https://stackoverflow.com/questions/56433113
复制相似问题