如何根據過濾后的數據從數組中返回隨機值？

Question

我正在嘗試創建一個代碼，當按下按鈕時，會從我的數組中返回一個隨機值。 更具體地說，我已經創建了一個代碼，在按下按鈕時，會返回來自數組的隨機鏈接，並且代碼會顯示圖像。 我想更進一步並擁有它，以便可以按標准過濾數組。 我在 js 中有如下數組格式： {site: "(link here, and does not have parenthesis in the actual code)", series: "1", type: "SP", dice: "1", rps: "S", species: "N/A", name: "Isabelle"} 400 多行的數組格式相同。 我的 HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Card Selector</title>
    <link rel="stylesheet" href="mainimgbg.css">
</head>
<body class="light-theme">
    <h1>amiibo Selector</h1>
    <p id="msg">To Do:</p>
    <ul>
      <li class="list">Add exclusion parameters</li>
      <li class="list">Add sanrio images</li>
    </ul>
    <input type=button id="btnSearch" value="Select" onclick="GetValue();" />
<div id="message"></div>
    <script src="gendetailedextra.js"></script>
    <script>alert("This site is a work in progress.")</script>
    <noscript>You need to enable JavaScript to view the full site.</noscript>
</body>
</html>

我的js：

'use strict'
var myarray= new Array(
    {400 line array formatted as mentioned above},);
function GetValue()
{

    var random = myarray[Math.floor(Math.random() * myarray.length)];
    //alert(random);
    document.getElementById("message").innerHTML='<img src='+random+'>';
}

我正在查看名稱生成器的代碼，發現一個 HTML 代碼片段似乎很有用，但我不知道如何實現它：

<script type="text/javascript">
<!--
function click_usage(box) {
    if ($(box).is(':checked')) {
        if ($(box).attr('id')=='all') {
            $('.usage-cb').prop('checked', false);
        } else {
            $('#all').prop('checked', false);
        }
    }
}
//-->
</script>

我認為最好的方法是使用某種復選框，我可能可以用谷歌搜索如何在 HTML 端格式化。 此外，我遇到了一個問題，因為我現在在數組中除了鏈接之外還有多條數據，代碼不再為我提供嵌入的圖像。 如果需要，我願意犧牲這個功能。

Answer 1

你的代碼都很好，除了一個小細節。

當您調用GetValue()時，您會獲得數組的隨機元素。 但是，此元素不是 URL 的字符串，而是 object ( {site:"abc", rps: "S", ...} )。 要訪問 object 中的值，請使用. 分隔器。 因此，您的 function 中的行應如下所示：

document.getElementById("message").innerHTML='<img src=' + random.site + '>';

（ random.site而不是random 。如果您需要不同的屬性，請使用random.property_name_here ）

根據您從其他網站找到的代碼：此代碼需要 jQuery 並且特定於該站點的 HTML。 這段代碼所做的只是在某些條件下取消選中某些復選框。

為了更好的可讀性，我會這樣格式化你的代碼：

let myArray= [{site:"abc", type:"SP", ...}, {...}, {...}, {...}];
function randomFromArray(arr) {
    return arr[Math.floor(Math.random() * arr.length)];
}
document.getElementById("message").innerHTML=`<img src="${randomFromArray(myArray).site}">`;

編輯：Function 按標准過濾您的陣列。

function filterArr(array, field, value) {
  return array.filter(function (k) {
    return k[field] === value;
  });
}
//usage:
filterArr(myArray, "rps", "S"); //returns all elements with `rps: "S"`
filterArr(myArray, "type", "SP"); //returns all elements with `type: "SP"`

因此，要從過濾后的數組中獲取隨機元素：

document.getElementById("message").innerHTML=`<img src="${randomFromArray(filterArr(myArray, "type", "SP")).site}">`;

要使您的按鈕使用新功能：（刪除onclick="GetValue();" ）

document.getElementById("btnSearch").addEventListener('click', function () {
    document.getElementById("message").innerHTML=`<img src="${randomFromArray(filterArr(myArray, "type", "SP")).site}">`;
}

了解更多： Object（MDN 文檔） return關鍵字（MDN 文檔）模板文字（MDN 文檔） addEventListener

如何根據過濾后的數據從數組中返回隨機值？

問題描述

1 個解決方案

解決方案1
0 已采納 2021-02-28 08:30:48

如何根據過濾后的數據從數組中返回隨機值？

問題描述

1 個解決方案

解決方案1 0 已采納 2021-02-28 08:30:48

解決方案1
0 已采納 2021-02-28 08:30:48