从 Javascript 变量中删除随机 HTML 图像答案

【问题标题】：Remove random HTML images from a Javascript variable从 Javascript 变量中删除随机 HTML 图像
【发布时间】：2020-11-30 22:49:10
【问题描述】：

我是 Javascript 新手，所以如果我使用了错误的术语，我深表歉意。我有一个代码，我需要在其中显示一些 HTML 图像，这些图像存储为包含特定位置（由类定义）中的多个项目的变量，例如：

 var fruit = ["<img class='item1' src='" + Banana + "'>" + 
        "<img class='item2' src='" + Apple + "'>" + 
        "<img class='item3' src='" + Grapes + "'>" + 
        "<img class='item4' src='" + Banana + "'>" +
        "<img class='item5' src='" + Grapes + "'>" + 
        "<img class='item6' src='" + Pear + "'>"],

稍后，我需要在称为刺激的更大图景中使用所有这些项目，例如：

stimulus: "<div class='container'> <img class='background' src='" + Background + "'>" + fruit + "</div>",

但是我只需要在水果中列出的 6 个随机水果中显示 3 个。例如，我需要得到类似的东西：

stimulus: "<div class='container'> <img class='background' src='" + Background + "'>" + half_fruit + "</div>",

在哪里： var half_fruit = ["<img class='item1' src='" + Banana + "'>" + "<img class='item3' src='" + Grapes + "'>" + "<img class='item6' src='" + Pear + "'>"],

有什么方法可以做到这一点，即使我的图像在技术上不是数组的项目？我有特定的水果组合（不仅仅是示例中的一个，总共大约 30 个），我需要删除该特定组合中的 3 个项目，同时还要让其他项目保持与以前相同的位置。这就是为什么我不将图像作为字符串存储在数组中的原因。这些变量定义为 var Banana = gorilla.stimuliURL('Banana.png');等等（Gorilla 是一个用于创建实验的平台；stimuliURL 函数从在线存储库调用图像地址）。感谢您的宝贵时间！

【问题讨论】：

为什么要声明一个数组，如果你只在里面放一个大字符串？我看起来你应该重新考虑你的数据结构。 Banana、Apple、.. 是如何定义的？
如果 put 在您的 HTML 中有三个“空”img 元素，您可以使用 JavaScript 通过随机设置它们的 src 属性来填充它们。您可能想要的唯一数组将由这些src 属性的一些有效值组成，例如[banana, apple, grapes, pear]（其中banana 具有类似my-image-folder/banana.png 的一些值）。
@Lain 这些变量定义为var Banana = gorilla.stimuliURL('Banana.png'); 等（Gorilla 是一个创建实验的平台；stimuliURL 函数从在线存储库调用图像地址）
@Cat 但我有特定的 fruit 组合（不仅仅是示例中的那个，总共大约 30 个），我需要删除该特定组合中的 3 项，同时还要保留其他人的位置与以前相同
顺便说一句，为了在 JavaScript 中构建 HTML 字符串，我会研究 ".insertAdjacentHTML" 方法 (developer.mozilla.org/en-US/docs/Web/API/Element/…) -- 甚至是使用 @ 的更通用且不易出错的技术987654338@ 方法和.appendChild 方法（developer.mozilla.org/en-US/docs/Web/API/Document/createElement 和developer.mozilla.org/en-US/docs/Web/API/Node/appendChild），在这种情况下你可能会使用.setAttribute 和.classList.add 来完成你的元素。

标签： javascript html image class random

【解决方案1】：

感谢您的 cmets，我将变量重新排列如下。首先，我为每个图像创建变量以从 Gorilla 访问它们的地址，例如

var banana_img = gorilla.stimuliURL('banana.png');

然后，我为每个位置的每个水果创建了变量：

var banana = ["<img class='item1' src='" + banana_img + "'>", "<img class='item2' src='" + banana_img+ "'>", "<img class='item3' src='" + banana_img+ "'>", "<img class='item4' src='" + banana_img + "'>", "<img class='item5' src='" + banana_img + "'>", "<img class='item6' src='" + banana_img + "'>"];

然后，我将每个水果组合保存为变量，例如

var fruit = [banana[0], apple[1], grapes[2], banana[3], grapes[4], pear[5]]

最后，我对它进行了排序，选择了前 3 个，只得到了三个随机项：

half_fruit = fruit.sort( function() { return 0.5 - Math.random() } ).slice(0, 3).join(" ");

如果您找到更好的方法，请在下面回答或评论！

【讨论】：