我有一个嵌入框架元素的书籍清单。我想退还其中的三本书，并将它们插入div我已经定义的书中。我正在尝试使用随机播放方法，但是由于无法获取要显示或随机化的元素，所以出现了一些错误。
下面的代码是我尝试使用的示例。
Java脚本
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>
出于某些原因，事情可能没有起作用。代码中有很多小错误。
您的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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句