javascript - 从 Javascript 变量中删除随机 HTML 图像
问题描述
我是 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 函数从在线存储库调用图像地址)。感谢您的时间!
解决方案
感谢您的评论,我将变量重新排列如下。首先,我为每个图像创建变量以从 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(" ");
如果您找到更好的方法,请在下面回答或评论!
推荐阅读
- git - git pull 和 git pull origin 有什么区别
- node.js - 使用 promise 更正嵌套异步函数的错误处理
- c - 如何以百分比百分比获取 C 程序中的 CPU 使用率
- android - 有任何 ActionBar 可见性更改事件侦听器
- javascript - 承诺后需要帮助测试 then 部分
- ios - 重复符号 '_OBJC_CLASS_$_EXReactNativeUserNotificationCenterProxy' 在:
- php - 将 laravel 5.6 升级到 laravel 8 时我应该改变的观点?
- python - 关于将交易机器人 .exe 文件上传到 VPS 以 24/7 运行的建议
- python - 将 tfa.text.crf_sequence_score 扩展到波束搜索
- git - Gitlab Personal Access Token - 在哪里保存用于无缝克隆/拉/推的令牌