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>

我是 JS 新手，最近的课堂作业一直遇到问题。我已经向我的教授寻求帮助，但我仍然不明白。对于我们的任务，我需要使用 for 循环从我的 beatlesArray 中检索元素，并在单击图像时将它们连接成具有这种格式的字符串变量：1. Paul 2. George。为此，我被告知不要使用 beatlesArray.join(", ")，但无法弄清楚如何在我的 beatlesNameStr 中添加元素。有人可以提供帮助吗？

我尝试使用 beatlesNameStr += cntr + ". " + addJohn...等将它们添加到字符串中，但这根本不起作用。我只是对如何添加正在推送的元素感到困惑。

Answer 1

您走在正确的轨道上。像这样更新 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; 
}

使用 for 循环从数组中检索元素

1 个答案: