如何根据过滤后的数据从数组中返回随机值？

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