Question

我一直在使用脚本来随机切换一组图像上的类。到目前为止，它可以按预期工作，但是我想知道是否有一种方法可以针对特定的类，因为它似乎是针对window的，我不确定这是最好的方法。

这是我到目前为止所拥有的：

var counter = 0;
$('.images img').each(function(i) {
  if (i == 0) {
    counter = 0;
  } else {
    counter++;
  }
  if (counter < 5) {
    $(this).addClass('show');
  } else {
    $(this).addClass('hide');
  }
});

function shuffleRandomLogos(remove, add) {
  const logo = $("." + remove).toArray();
  const logoLength = logo.length;
  const randomNum = Math.floor(Math.random() * logoLength);
  const randomLogo = logo[randomNum];
  $(randomLogo).removeClass(remove);
  $(randomLogo).addClass(add);
}

window.setInterval(function() {
  shuffleRandomLogos("show", "hide");
  shuffleRandomLogos("hide", "show");
}, 600);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="images">
  <img src="https://www.fillmurray.com/200/300" alt="">
  <img src="https://www.fillmurray.com/g/200/300" alt="">
  <img src="https://www.fillmurray.com/200/300" alt="">
  <img src="https://www.fillmurray.com/g/200/300" alt="">
  <img src="https://www.fillmurray.com/200/300" alt="">
  <img src="https://www.fillmurray.com/g/200/300" alt="">
  <img src="https://www.fillmurray.com/g/200/300" alt="">
  <img src="https://www.fillmurray.com/200/300" alt="">
  <img src="https://www.fillmurray.com/g/200/300" alt="">
  <img src="https://www.fillmurray.com/200/300" alt="">
  <img src="https://www.fillmurray.com/g/200/300" alt="">
</div>

我尝试将const logo = $("."+remove).toArray();更新为此：

起作用的

const logo = $(".images img").toArray();，但是它开始出现在前5名中并开始变得有点疯狂。

因此不确定是否需要调整以使其针对.images img，或者是否有更好的解决方法。

以下是演示（CodePen）的链接： https://codepen.io/ultraloveninja/pen/gJRqPM

Answer 1

您不需要首先添加随机类，只需手动调用函数，然后再间隔调用即可。同时删除所有.show类，并仅添加到选定的类。

还请注意，应将准备变量移出函数，以加快处理速度。

var logos, logosLength;

function makeImages(count)
{
  for (var i = 0; i < count; i++) {
    $('.images').append('<img src="https://via.placeholder.com/200x300.png?text=' + i + '">');
  }

  logos = $(".images img");
  logosLength = logos.length;
}

function shuffleRandomLogos(count)
{
  logos.removeClass('show');
   for (var i = 0; i <= count; i++) {
      let randomLogo = logos[Math.floor(Math.random() * (logosLength - 1))];

      $(randomLogo).addClass('show');
  }
}

makeImages(20);
shuffleRandomLogos(5);
window.setInterval(function () {
    shuffleRandomLogos(5);
}, 600);

.images img {
  display: none;
}

.images img.show {
  display: inline;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="images">
</div>

使用setInterval定位特定的类并使用jQuery定位函数

1 个答案: