Question

我有一些代码的codepen。卡片翻盖可按预期工作，但无法使随机播放部分正常工作。图像消失。背面图像（图像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);
});
}
});

Answer 1

您要将div附加到文档的另一部分内部

<div class="container shuffleImg">

在

旁边

<div class="row">

因为您正在使用this中的参数appendTo。您应该在每张卡上添加一个ID，然后选择使用它来调用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)));
}

在多个div之间随机播放图像

1 个答案: