时间戳

首页 > 解决方案 > 调试 jQuery 随机变量问题

jquery - 调试 jQuery 随机变量问题

问题描述

我为最近的一个 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 两次时是否会发生这种情况。

标签： jqueryrandom

解决方案

提琴手

好的，我已经改变了很多东西，所以我会尝试检查每一个修改。

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

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

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

我也删除了这些元素，因为如果你隐藏它们，它们将保留在 DOM 中并且会使页面膨胀。因此，现在您将始终在 4 内剩余 4 个.container。

我已经重复使用了这些颜色，所以我将把它留给你，你想用它们做什么。:) 但是您应该能够获取此代码并根据您所拥有的进行修改。

$('#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">
    <div class="cardHeader">
      Things
    </div>
  </div>

  <div class="randomJesusBeats">
    <div class="cardHeader">
      Jesus
    </div>
  </div>

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

推荐阅读