取一个随机的 n 个元素数组并将它们插入到指定的元素中

Question

我有一个嵌入框架元素的书籍列表。我想退回其中三本书并将它们插入到我已经定义的div 中。我正在尝试使用 shuffle 方法，但由于无法让元素显示或随机化，因此出现了问题。

下面的代码是我正在尝试使用的示例。

Javascript

   function randomBooks(arr, count) {

   var arr = [ // list of books
   '<iframe type="text/html" width="150" height="200" frameborder="0" allowfullscreen style="max-width:100%" src="https://read.amazon.com/kp/card?asin=B00ARFNQ54&asin=B00ARFNQ54&preview=newtab&linkCode=kpe&ref_=cm_sw_r_kb_dp_wpdGxbH9ZAXX9&hideShare=true" ></iframe>',
   '<iframe type="text/html" width="150" height="200" frameborder="0" allowfullscreen style="max-width:100%" src="https://read.amazon.com/kp/card?asin=B00AFH1TBC&asin=B00AFH1TBC&preview=newtab&linkCode=kpe&ref_=cm_sw_r_kb_dp_5udGxbAPXN07Q&hideShare=true" ></iframe>',
   '<iframe type="text/html" width="150" height="200" frameborder="0" allowfullscreen style="max-width:100%" src="https://read.amazon.com/kp/card?asin=B005GSYZRA&asin=B005GSYZRA&preview=inline&linkCode=kpe&ref_=cm_sw_r_kb_dp_FxdGxbYXKDM2P&hideShare=true" ></iframe>',
   '<iframe type="text/html" width="150" height="200" frameborder="0" allowfullscreen style="max-width:100%" src="https://read.amazon.com/kp/card?asin=B00ARFNQ54&asin=B00ARFNQ54&preview=newtab&linkCode=kpe&ref_=cm_sw_r_kb_dp_wpdGxbH9ZAXX9&hideShare=true" ></iframe>',
   '<iframe type="text/html" width="150" height="200" frameborder="0" allowfullscreen style="max-width:100%" src="https://read.amazon.com/kp/card?asin=B00AFH1TBC&asin=B00AFH1TBC&preview=newtab&linkCode=kpe&ref_=cm_sw_r_kb_dp_5udGxbAPXN07Q&hideShare=true" ></iframe>',
   '<iframe type="text/html" width="150" height="200" frameborder="0" allowfullscreen style="max-width:100%" src="https://read.amazon.com/kp/card?asin=B005GSYZRA&asin=B005GSYZRA&preview=inline&linkCode=kpe&ref_=cm_sw_r_kb_dp_FxdGxbYXKDM2P&hideShare=true" ></iframe>'

   ];    

   var insertDiv = document.getElementsByClassName("bookFrame"); // Div I want elements inserted

   var shuffled = arr.slice(0), i = arr.length, min = i - count, temp, index;
   while (i-- > min) {
       index = Math.floor((i + 1) * Math.random());
       temp = shuffled[index];
       shuffled[index] = shuffled[i];
       shuffled[i] = temp;
   }

   var returnedValue= shuffled.slice(min, 3);
   insertDiv.innerHTML(returnedValue); // inject 3 random book elements

   alert( randomBooks(arr, 3)); // Checking 

   };

HTML

<p class="center bookFrame">

<!-- Insert books here -->

</p>

Answer 1

这段代码有多个错误。

首先，alert( randomBooks(arr, 3)); // Checking 似乎在函数 randomBooks 本身内，所以显然它永远不会被调用..

其次，你不能这样做insertDiv.innerHTML(returnedValue);，因为'innerHTML' 是一个字符串，而不是一个函数。 getElementsByClassName 的返回值是一个列表，而不是单个元素，所以它应该是这样的：

insertDiv[0].innerHTML = returnedValue;

可能会有更多错误，看起来这段代码从未真正运行过，所以我建议你先开始执行它，看看它是如何运行的。

提示：出于测试目的，您可以使用开发人员控制台（在 chrome 中为 F12，转到控制台选项卡并从那里调用 randomBooks() 以查看它的内容，而不是向代码添加随机调用和警报返回）。

Answer 2

某些原因可能无法正常工作。代码中有一堆小错误。

您的 randomBooks() 方法接受参数 arr，但随后您用自己的方法覆盖了它。我认为您可能希望将书籍数组传递到随机发生器中，所以我在示例中这样做了。

其次，getElementsByClassName() 返回一个数组。如果您知道要找到第一个选择器，您可能想要获取它的第一个元素或切换到 querySelector()。

最后，el.innerHTML被直接赋值给了。您使用它更像是 jQuery 的 $el.html() 方法的工作原理。

function addBooks(target, bookIds, count) {
  // -----------------------------
  // A classic array shuffler (inplace).
  // -----------------------------
  function shuffleArray(array) {
    for (var i = array.length - 1; i > 0; i--) {
      var j = Math.floor(Math.random() * (i + 1));
      var temp = array[i];
      array[i] = array[j];
      array[j] = temp;
    }
    return array;
  }
  // -----------------------------

  // -----------------------------
  // Get 3 random books.
  // -----------------------------
  shuffleArray(bookIds);
  var selected = bookIds.slice(0, 3);
  // -----------------------------
  
  // -----------------------------
  // Construct some HTML for the 3 books.
  // -----------------------------
  var html = selected.map(function(bookId){
    var retval = '<iframe type="text/html" frameborder="0" allowfullscreen src="https://read.amazon.com/kp/card?asin=' + bookId + '&asin=' + bookId + '&preview=newtab&linkCode=kpe&ref_=cm_sw_r_kb_dp_wpdGxbH9ZAXX9&hideShare=true" ></iframe>';
    return retval;
  });
  // -----------------------------

  // -----------------------------
  // inject 3 random book elements
  // -----------------------------
  document.querySelector(target).innerHTML = html;
  // -----------------------------
};

var bookIds = [
  'B00ARFNQ54',
  'B00AFH1TBC',
  'B005GSYZRA',
  'B00ARFNQ54',
  'B00AFH1TBC',
  'B005GSYZRA'
];

addBooks(".bookFrame", bookIds, 3);

iframe { width: 150px; height: 200px; max-width:100%; }

<p class="center bookFrame"><!-- Insert books here --></p>