使用 for 循环从 Array 中检索元素

Question

 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>

I'm new to JS and keep running into issues for a recent class assignment.我是 JS 新手，并且经常遇到最近 class 分配的问题。 I've reached out to my professor for help but I'm still not understanding it.我已经向我的教授寻求帮助，但我仍然不明白。 For our assignment, I need to use a for-loop to retrieve elements from my beatlesArray and concatenate them into a string variable with this format if the images are clicked: 1. Paul 2. George .对于我们的任务，我需要使用 for 循环从我的 beatlesArray 中检索元素，并在单击图像时将它们连接成具有这种格式的字符串变量： 1. Paul 2. George 。 To do this I was told NOT to use beatlesArray.join(", ") but cannot figure out how to add the elements in my beatlesNameStr.为此，我被告知不要使用beatlesArray.join(", ")但无法弄清楚如何在我的 beatlesNameStr 中添加元素。 Would anyone be able to assist?有人可以提供帮助吗？

I tried adding them to the string by using beatlesNameStr += cntr + ". " + addJohn …etc but that didn't work at all.我尝试使用beatlesNameStr += cntr + ". " + addJohn ...等将它们添加到字符串中，但这根本不起作用。 I'm just confused how exactly to add the elements that are being pushed.我只是很困惑如何准确地添加正在推送的元素。

Answer 1

You are on the right track.你在正确的轨道上。 Update processImages function like this:像这样更新 processImages function：

function processImages ()
{
    var beatlesNameStr = "";    
    for (cntr = 1; cntr <= beatlesArray.length; cntr++)
    {
        beatlesNameStr += cntr + ". " + beatlesArray[cntr - 1] + " ";
    }   
    $("list").innerHTML = beatlesNameStr; 
}

or using ES6 syntax:或使用 ES6 语法：

function processImages ()
{
    var beatlesNameStr = beatlesArray.reduce((result, current, index) => `${result} ${index + 1}.${current}`, "");  
    $("list").innerHTML = beatlesNameStr; 
}

使用 for 循环从 Array 中检索元素

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-03-25 00:29:24

使用 for 循环从 Array 中检索元素

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-03-25 00:29:24

解决方案1
1 已采纳 2021-03-25 00:29:24