个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
24
4
我有一个简单的问题要问。我在这里创建了一个可用的随机生成器:
var randPics = document.querySelector("#randPics");
var getPics = document.querySelector(".getPics");
getPics.addEventListener("click", function(){
//array to store images for the random image generator
var picsGallery = new Array();
picsGallery = ["https://static2.jetpens.com/images/a/000/026/26648.jpg?mark64=aHR0cDovL3d3dy5qZXRwZW5zLmNvbS9pbWFnZXMvYXNzZXRzL3dhdGVybWFyay5wbmc&markalign64=dG9wLHJpZ2h0&markscale=19&s=938428f6eca690069a86f66d0754444b",
"http://assets.sajiansedap.com/media/article_image/cover/large/25505-cara-memilih-nanas-yang-matang.jpg",
"https://cdn.shopify.com/s/files/1/1030/8703/products/epal-hijau-green-apple-each-sebiji_1024x1024.jpg?v=1487817043"]
//generate random no to select the random images
var rnd = Math.floor(Math.random() * picsGallery.length);
//change the pics locations of the source
randPics.src=picsGallery[rnd]
});#randPics{
width: 300px;
height: 300px;
align-content: center;
}<body>
<p>Display a random image each time the buttons is clicked!</p>
<p> You get a <span id="text"></span> </p>
<button class="getPics"> Click ! </button>
<br>
<img id="randPics" src="https://d30y9cdsu7xlg0.cloudfront.net/png/45447-200.png">
</body>当用户点击按钮时，图片源会随机选择数组中的一张图片。但是，我有一点问题。如何将文本关联到图像？例如，如果用户单击按钮并获得钢笔的图像，文本
You get a
应该改为
You get a pen.
感谢您的帮助!
最佳答案
首先，您需要将文本存储在某处，然后您必须有一种方法将文本与图像相关联，为此您可以将与图像相关联的文本存储在一个对象中，然后拥有一个此类对象的数组，而不仅仅是图片 url 数组。此外，您无需在事件处理程序函数内声明数组，您可以定义一次，然后在函数内使用它，因为它将在范围内。像这样:
var randPics = document.querySelector("#randPics");
var getPics = document.querySelector(".getPics");
var textElem = document.querySelector("#text");
//array to store images for the random image generator
var picsGallery = picsGallery = [{img: "https://static2.jetpens.com/images/a/000/026/26648.jpg?mark64=aHR0cDovL3d3dy5qZXRwZW5zLmNvbS9pbWFnZXMvYXNzZXRzL3dhdGVybWFyay5wbmc&markalign64=dG9wLHJpZ2h0&markscale=19&s=938428f6eca690069a86f66d0754444b", text:'pen'},
{img: "http://assets.sajiansedap.com/media/article_image/cover/large/25505-cara-memilih-nanas-yang-matang.jpg", text:'pineapple'},
{img: "https://cdn.shopify.com/s/files/1/1030/8703/products/epal-hijau-green-apple-each-sebiji_1024x1024.jpg?v=1487817043", text:'apple'}];
getPics.addEventListener("click", function(){
//generate random no to select the random images
var rnd = Math.floor(Math.random() * picsGallery.length);
//change the pics locations of the source
randPics.src=picsGallery[rnd].img;
text.innerHTML = picsGallery[rnd].text;
});#randPics{
width: 300px;
height: 300px;
align-content: center;
}<body>
<p>Display a random image each time the buttons is clicked!</p>
<p> You get a <span id="text"></span> </p>
<button class="getPics"> Click ! </button>
<br>
<img id="randPics" src="https://d30y9cdsu7xlg0.cloudfront.net/png/45447-200.png">
</body>关于javascript - 如何在 Javascript 中将文本与图像相关联？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45402134/
24
4
0
最近几天，我们考虑使用 Solr 作为我们的首选搜索引擎。 我们需要的大多数功能都是开箱即用的，或者可以轻松配置。 然而，我们绝对需要的一项功能似乎在 Solr 中被很好地隐藏(或缺失)了。 我会试着
我是 Sequelize 的新手，并且一直在探索关联。我正在使用 mysql 5.6 并 Sequelize ^4.42.0。我正在尝试创建两个简单的表:PRJS 和 TASKS 并将一些数据插入这些
关联、聚合和组合之间有什么区别？请从实现的角度解释一下。 最佳答案 对于两个对象，Foo 和 Bar 可以定义关系 关联 - 我与一个对象有关系。 Foo 使用 Bar public class Fo
这两种 hasOne 语法有什么区别？ class Project { ....... ............ static hasOne = Employee // static h
对于当前的项目，我想使用遗传算法 - 目前我查看了 jenetics 库。 如何强制某些基因相互依赖？我想将 CSS 映射到基因上，例如我有基因指示是否显示图像，以及如果它也是各自的高度和宽度。因此，
关联、聚合和组合之间有什么区别？请从实现的角度解释一下。 最佳答案 对于两个对象，Foo 和 Bar 可以定义关系 关联 - 我与一个对象有关系。 Foo 使用 Bar public class Fo
假设我有一个名为“学生”的表格，其中包含姓名、手机、电子邮件、首选类(class)、首选学校、性别、年龄、地址、资格、职称、家庭电话、工作电话等列 我想从 Students 表中选择数据并插入到 2
问题标题有点困惑。我有一级员工和一级项目。一名或多名员工正在从事一个或多个项目。在这个关联中，我只有一个从具有*多重性的员工类到具有*多重性的项目类的链接。现在有另一种实现。每个项目只有一名经理，属于
到目前为止，我有一个程序采用一组随机点、站点，并围绕这些点形成适当的 Voronoi 图，表示为角和边的图形。它还为我提供了 Delaunay 三角剖分作为另一个以所有站点为节点的图形(尽管我不知道这
实现IComMethodEvents时你得到三个事件。 OnMethodCall OnMethodException OnMethodReturn 我的目标是记录 COM+ 组件中每个方法的调用时间。
我正在处理这个问题。我正在创造数学问题，每一个都有回应。例如。 如果我的问题是关于“5x + 15 = 2 的结果？”，我将只等待一个答案(整数)。 如果我的问题是关于“给我这个形状的面积和许可”，我
我正在寻找一种数据结构来保存唯一元素的无序集合，它将支持以下操作 在集合中任意位置插入/删除元素 查询元素是否存在 访问一个随机元素 天真地，1 和 2 建议使用关联容器，例如unordered_se
是否可以在 LINQ 中使用类似 ContactAddress.Contact 的内容，而无需在 SQL Server 中在这两者之间创建外键关系(通过 Contact.Id ContactAddr
我一直在谷歌搜索，但不明白调用 javax.persistence.criteria.Subquery 和 Criteria API 的方法相关的结果是什么。 http://www.objectdb.
我正在关注 Chris McCord 的“Programming Phoenix”一书，在第 6 章中，在 User 之间创建了一个关系。和一个 Video . 尝试使用 mix phoenix.se
我在 XAML 中有一个 ItemsControl，我在其中为每个组显示一个扩展器，以便我可以展开/折叠该组。我想保持 IsExpanded 的状态属性(以及可能与组标题显示相关的其他设置)。通常你只
Oracle 11 中是否有内置方法来检查 varchar2 字段中值的相关性？例如，给定一个简单的表，如下所示: MEAL_NUM INGREDIENT --------------------
是否可以在没有 JPA 在数据库中创建外键的情况下设置多对一关联？ 这些表归另一个系统所有，并以异步方式填充。因此我们不能在数据库中使用 FK。仍然，几乎总是，最终是一种关系。 @ManyToOne(
我一直在使用NHibernate，使用Fluent NHibernate进行映射。我解决了很多问题，并开始认为自己在nhibernate中经验丰富。 但是，此错误非常奇怪。 这是我的模型: p
我正在开发一个 Typescript Sequelize 项目，其中我的 /models/index.ts 文件具有以下“导入此目录中的所有模型”功能: var basename = path.bas
我是一名优秀的程序员,十分优秀！