javascript - 使用 for 循环从 Array 中检索元素
问题描述
var beatlesArray; //global variable
var $ = function(id) {
return document.getElementById(id);
}
function processImages() {
beatlesNameStr = "";
for (cntr = 1; cntr <= beatlesArray.length; cntr++) {
console.log(beatlesArray[cntr]);
beatlesNameStr += cntr + ". ";
}
$("list").innerHTML = beatlesNameStr;
}
function addJohn() {
beatlesArray.push("John");
this.border = '4px';
this.style.color = 'yellow';
$("paul").border = "0px";
$("george").border = "0px";
$("ringo").border = "0px";
}
function addPaul() {
beatlesArray.push("Paul");
this.border = '4px';
this.style.color = 'yellow';
$("john").border = "0px";
$("george").border = "0px";
$("ringo").border = "0px";
}
function addGeorge() {
beatlesArray.push("George");
this.border = '4px';
this.style.color = 'yellow';
$("john").border = "0px";
$("paul").border = "0px";
$("ringo").border = "0px";
}
function addRingo() {
beatlesArray.push("Ringo");
this.border = '4px';
this.style.color = 'yellow';
$("john").border = "0px";
$("paul").border = "0px";
$("george").border = "0px";
}
window.onload = function() {
$("showlist").onclick = processImages;
$("john").onclick = addJohn;
$("paul").onclick = addPaul;
$("george").onclick = addGeorge;
$("ringo").onclick = addRingo;
beatlesArray = new Array();
}
<html>
<head>
<title>Assignment 4</title>
<link rel="stylesheet" type="text/css" href="asgn4_dove.css">
<script src="asgn4_dove.js"></script>
</head>
<body>
<h1>Assignment 4</h1>
<h4>The Beatles</hr>
<table border='1' cellpadding='8px'>
<tr>
<td>
<img id="john" src="http://profperry.com/Classes20/JQuery/beatles_john.jpg" alt="Picture of John">
<br>John
</td>
<td>
<img id="paul" src="http://profperry.com/Classes20/JQuery/beatles_paul.jpg" alt="Picture of Paul">
<br>Paul
</td>
<td>
<img id="george" src="http://profperry.com/Classes20/JQuery/beatles_george.jpg" alt="Picture of George">
<br>George
</td>
<td>
<img id="ringo" src="http://profperry.com/Classes20/JQuery/beatles_ringo.jpg" alt="Picture of Ringo">
<br>Ringo
</td>
</table>
<br><br>
<input type="button" id="showlist" value="Show Me the List">
<br>
<p id="list"></p>
</body>
</html>
我是 JS 新手,在最近的课堂作业中不断遇到问题。我已经向我的教授寻求帮助,但我仍然不明白。对于我们的任务,我需要使用 for 循环从我的 beatlesArray 中检索元素,如果单击图像,则将它们连接成具有这种格式的字符串变量 : 1. Paul 2. George
。为此,我被告知不要使用beatlesArray.join(", ")
,但无法弄清楚如何在我的 beatlesNameStr 中添加元素。有人可以提供帮助吗?
我尝试使用 ...etc 将它们添加到字符串中,beatlesNameStr += cntr + ". " + addJohn
但这根本不起作用。我只是很困惑如何准确地添加正在推送的元素。
解决方案
你在正确的轨道上。像这样更新 processImages 函数:
function processImages ()
{
var beatlesNameStr = "";
for (cntr = 1; cntr <= beatlesArray.length; cntr++)
{
beatlesNameStr += cntr + ". " + beatlesArray[cntr - 1] + " ";
}
$("list").innerHTML = beatlesNameStr;
}
或使用 ES6 语法:
function processImages ()
{
var beatlesNameStr = beatlesArray.reduce((result, current, index) => `${result} ${index + 1}.${current}`, "");
$("list").innerHTML = beatlesNameStr;
}
推荐阅读
- javascript - React HOC 上的打字稿
- reactjs - 使用 react-material-ui 关闭全屏对话框后,OnClick 侦听器不起作用
- python - 如何使用 request 和 bs4 模块而不使用 Virustotal 的 PublicAPI 在 Virustotal 上获得文件哈希的声誉?
- javascript - 从 gapi 调用 grantOfflineAccess 方法时,Google OAuth 始终显示同意屏幕
- r - 如何通过 shinyheatmaply 部署交互式热图
- python - 使用月份日期时间合并多个数据框
- c# - 使用 Ingress 提供的证书在 Kubernetes 中提供 HTTPS 的 ASP.net Core OData
- dialogflow-es - 在将请求发送到完整端点之前在 js 中编辑请求
- angular - 使用 onclick 菜单项在 ngb-tab 中显示我的组件
- javascript - 如何访问和使用 redux-form 上子组件的值以使复选框工作并启用有条件渲染的额外选项