调试jQuery随机变量问题

Question

我为一个最近的Web项目构建了一个jQuery随机显示模块，但是它有一个错误。它的意思是用一个随机的div元素填充4个网格图块，并带有一个将加载4个新图块的按钮。有时它只会显示2或3，但我不确定为什么。

在https://www.joytotheworldcoaching.com上查看它的实际运行（关于选项卡）

这里是代码：

//Randomizer on CLICK 

$('#btnRandomizer').click(function() {

         var classList = [".randomLittleThings", ".randomJesusBeats", ".randomJoyJams", ".randomFavorites", ".randomQuotes", ".randomPhotos"];
         var randomClass1 = classList[Math.floor(Math.random() * classList.length)];
         var randomClass2 = classList[Math.floor(Math.random() * classList.length)];
         var randomClass3 = classList[Math.floor(Math.random() * classList.length)];
         var randomClass4 = classList[Math.floor(Math.random() * classList.length)];

         var random1 = $(randomClass1)[Math.floor(Math.random() * $(randomClass1).length)];
         var random2 = $(randomClass2)[Math.floor(Math.random() * $(randomClass2).length)];
         var random3 = $(randomClass3)[Math.floor(Math.random() * $(randomClass3).length)];
         var random4 = $(randomClass4)[Math.floor(Math.random() * $(randomClass3).length)];


         var color = ["rgb(245, 171, 153)","rgb(254, 180, 123)","rgb(255, 126, 95)", "rgb(212, 14, 204)", "rgb(113, 58, 166)"];
            var randomHeaderColor1 = color[Math.floor(Math.random() * color.length)];
            var randomHeaderColor2 = color[Math.floor(Math.random() * color.length)];
            var randomHeaderColor3 = color[Math.floor(Math.random() * color.length)];
            var randomHeaderColor4 = color[Math.floor(Math.random() * color.length)];

            $('.randomLittleThings').fadeOut('hide');
            $('.randomJesusBeats').fadeOut('hide');
            $('.randomJoyJams').fadeOut('hide');
            $('.randomFavorites').fadeOut('hide');
            $('.randomQuotes').fadeOut('hide');
            $('.randomPhotos').fadeOut('hide');

            $(random1).fadeIn('show');
               $('.randomLittleThings > .cardHeader').css({'background': randomHeaderColor1});
            $(random2).fadeIn('show');
               $('.randomJesusBeats > .cardHeader').css({'background': randomHeaderColor2});
            $(random3).fadeIn('show');
               $('.randomJoyJams > .cardHeader').css({'background': randomHeaderColor3});
            $(random4).fadeIn('show');
               $('.randomFavorites > .cardHeader').css({'background': randomHeaderColor4});

     });

[每次应该单击按钮时，它应该显示4个新图块，但偶尔仅显示2或3。我想知道当随机化器两次选择相同的div时是否会发生。

Answer 1

Jsfiddle

[确定，我已经做了很多更改，所以我将尝试遍历每个修订。

首先，我创建的是您版本的原型，可以解决当前的问题。它解决了在所有四个div中循环的问题，并显示了4个全新的不同div。但还包括其他改进，例如动态创建新元素。

第一个for循环只是从数组中提到的div列表中创建一个jQuery对象。然后，一旦所有当前div被隐藏，将触发下一个for循环-将jQuery对象附加到页面中。这是您要重点添加到网站中的部分。如您所见，检查小提琴，每次都会创建4个新项目，并且不会重复。这是因为使用div后，该div将从classList中删除。

我也做了很多代码整理。例如，我没有针对每个元素并告诉每个元素隐藏，而是针对周围的容器，并找到了该容器内的所有div。我知道这可能与您在网站上设置的内容不完全相同，但是您可以采用相同的概念。如您所见，这更加简洁，可以节省编写全部代码的时间。

$('#btnRandomizer').click(function() {

  var color = ["rgb(245, 171, 153)", "rgb(254, 180, 123)", "rgb(255, 126, 95)", "rgb(212, 14, 204)", "rgb(113, 58, 166)"];
  var randomClass = [],
    jQueryObject = [],
    randomColor = [],
    classList = [
      "<div class='randomLittleThings'><div class='cardHeader'>Things</div></div>",
      "<div class='randomJesusBeats'><div class='cardHeader'>Jesuss</div></div>",
      "<div class='randomJoyJams'><div class='cardHeader'>Jams</div></div>",
      "<div class='randomFavorites'><div class='cardHeader'>Favorites</div></div>",
      "<div class='randomQuotes'><div class='cardHeader'>Quotes</div></div>",
      "<div class='randomPhotos'><div class='cardHeader'>Photos</div></div>"
    ];


  for (i = 0; i <= classList.length; i++) {
    randomClass[i] = classList[Math.floor(Math.random() * classList.length)];
    classList = classList.filter(e => e !== randomClass[i]);
    jQueryObject[i] = $($.parseHTML(randomClass[i]));
  }

  $('.container div').fadeOut(1000, function() {
    $(this).remove();
    createNewElems();
  });

  function createNewElems() {
    for (i = 0; i < jQueryObject.length; i++) {

      for (j = 0; j < color.length; j++) {
        randomColor[j] = color[Math.floor(Math.random() * color.length)];
        $(jQueryObject).get(i).appendTo('.container').css({
          'background': randomColor[j]
        }).hide().fadeIn(250);
      }

    }
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btnRandomizer">
  Click me
</button>
<div class="container">
  <div class="randomFavorites">
    <div class="cardHeader">
      Favourites
    </div>
  </div>

  <div class="randomLittleThings">
    Little Things
  </div>

  <div class="randomJesusBeats">
    Jesusss
  </div>

  <div class="randomJoyJams">
    Jams
  </div>
</div>