Question

我有一个博客，每个帖子的底部随机刊登x3篇文章。有时，此功能无法显示全部3个（缺少1个）。

我看不出问题出在哪里。

jQuery

$.get("https://www.citychurchchristchurch.co.nz/blog.php", function(data) {
    var $quotes = $(data).find(".container-articles-5"),
      count = $quotes.length,
      $random = function() {
        return $quotes.eq(Math.floor(Math.random() * count));
      };
    $(".blog-ad-1").append($random);
});

HTML（显示广告的地方）

<aside class="blog-ad-4">
    <div class="blog-ad-5">
      <div class="blog-ad-3">
        <div class="blog-ad-1"></div>
      </div>
      <div class="blog-ad-3">
        <div class="blog-ad-1"></div>
      </div>
      <div class="blog-ad-3">
        <div class="blog-ad-1"></div>
      </div>
    </div>
</aside>

应同时显示所有3个广告。在此处（靠近底部）观看实时演示：https://www.citychurchchristchurch.co.nz/blog/eo-cycling-20181030

Answer 1

这只是一个猜测，但我会尝试以下操作：

$.get("https://www.citychurchchristchurch.co.nz/blog.php", function(data) {
  var $quotes = $(data).find(".container-articles-5"),
  count = $quotes.length,
  $random = function() {
    var articleNumber = Math.floor(Math.random() * count);
    console.log(articleNumber);
    return $quotes.eq(articleNumber);
  }
  $(".blog-ad-1").append($random);
});

通过这种方式，您可以检查是否始终在生成的相同商品编号（例如0）上显示广告失败。

Answer 2

问题在于Math.floor(Math.random() * count)可以在两个不同的调用中返回相同的值-没有什么可以确保它们唯一。但是DOM元素一次只能位于一个位置，因此，如果两次添加相同的引号，则它只会出现在第二个位置。

您可以在添加DIV之前先对其进行克隆，但是随后您会看到重复的引号。

一个更好的解决方案是随机洗$quotes，然后按顺序附加它们。

$.get("https://www.citychurchchristchurch.co.nz/blog.php", function(data) {
    var $quotes = $(data).find(".container-articles-5").get(),
      count = $quotes.length,
      $random = function(i) {
        return $quotes.eq(i));
      };
    shuffle($quotes);
    $(".blog-ad-1").append($random);
});

有关如何实现shuffle()功能的信息，请参见How to randomize (shuffle) a JavaScript array?。

请注意，由于该问题中的代码旨在用于数组，因此我使用.get()将jQuery集合转换为JavaScript元素数组。

Answer 3

我将对quote元素进行改组，并生成唯一的排序索引，以确保所有元素始终始终被附加。

因为这样做：

var count = 3;
var $random = function() {
  return $quotes.eq(Math.floor(Math.random() * count));
};

$(".blog-ad-1").append($random);

实际上，您执行以下操作的次数与.blog-ad-1的元素（可能为3）一样多。而且Math.random()不会总是给您所有3个索引：

var count = 3;

$(".blog-ad-1").append(function() {
    $quotes.eq(Math.floor(Math.random() * count));
});

所以您最终可能会得到：

index = Math.floor(Math.random() * 3); // 0
index = Math.floor(Math.random() * 3); // 1
index = Math.floor(Math.random() * 3); // 0

最后一次随机返回另外一个零（而不是2），再加上jQuery.append()，实际上是它删除了第一个元素（索引为0），并且将其附加到当前容器；因此缺少元素。

可能的解决方案：

function shuffle(items) {
  for (var i = items.length - 1; i > 0; i--) {
    var j = Math.floor(Math.random() * (i + 1));
    var temp = items[i];

    items[i] = items[j];
    items[j] = temp;
  }

  return items;
}

$.get("https://www.citychurchchristchurch.co.nz/blog.php", function(data) {
  var $quotes = $(data).find(".container-articles-5");
  var $adContainers = $(".blog-ad-1");

  shuffle($quotes).each(function (index) {
    $adContainers.eq(index).append(this);
  });
});

jQuery：有时随机失败

3 个答案:

可能的解决方案：