如何遍历一个数组，该数组一次一个地触发数组中每个项目的单击事件

Question

我在功能方面遇到了麻烦。 我试图在我的阵列的每个项目之间一个接一个地触发点击事件...如果有人可以向我解释如何解决它以及为什么。 我将非常感谢任何帮助。

 var track3 = new Audio(); track3.src= 'https://s3.amazonaws.com/freecodecamp/simonSound1.mp3'; head= $("#head").click (function (){ $("#head").css ("background-color","black"); $("#head").css({ opacity: 0.9}); track3.play (); setTimeout(function(){ $("#head").css({ opacity: 0.0 }); $("#head").css("background-color",""); }, 300); }); shoulders= $("#shoulders").click (function (){ $("#shoulders").css ("background-color","cyan"); track3.play(); setTimeout(function() { $("#shoulders").css("background-color",""); }, 300); }); knees= $("#knees").click (function (){ $("#knees").css ("background-color","mediumPurple"); track3.play (); setTimeout(function(){ $("#knees").css("background-color", ""); }, 300); }); toes= $("#toes").click (function (){ $("#toes").css ("background-color","mediumSpringGreen"); track3.play(); setTimeout(function() { $("#toes").css("background-color", ""); }, 300); }) var round= 0; var player= [ ]; var simon=[ ]; var pat= ["head", "shoulders", "knees", "toes"]; $(".start").click(function (){ simon=[ ]; player=[ ]; round=0; additionalRound(); }) function additionalRound(){ round ++; $("h2").html("Round:" +round); setTimeout(function() { $("h2").html("HEAD, SHOULDERS, KNEES, AND TOES!"); },2660); sequence(); } function sequence (){ simon.push(pat[Math.floor (Math.random ()*4 )]); blinkerBeats (); } function blinkerBeats() { for (var i = 0; i < simon.length; i++) { setTimeout(function() { $(simon[i]).trigger('click'); }, i * 800); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 1

好的，我把你的问题编辑成可读代码。 这是寻找的东西：

function sequence (){
  simon.push(pat[Math.floor (Math.random ()*4 )]);
  blinkerBeats (simon);
}

function blinkerBeats(arr) {
  var timer = 0,
      interval = 800;
  arr.map(function(elem){
    timer++;
    setTimeout(function(){
      $('#'+elem).trigger('click');
    }, timer * interval)
  })
}

现在，你的sequence()函数中的simon.push()只在数组中添加了1个条目。 如果你真的想要一个序列，你可能想要：

function sequence (times){
  for (i = 0; i < times; i++) {
    simon.push(pat[Math.floor (Math.random ()*4 )]);
  }
  blinkerBeats (simon);
}

工作示例：由于我没有初始标记，我只是使用了一些简单的<input>来测试代码。 请注意我没有更改其余的函数（因为我不熟悉它们的逻辑 - 我只更改sequence()和blinkerBeats()函数：

 var track3 = new Audio(); track3.src= 'https://s3.amazonaws.com/freecodecamp/simonSound1.mp3'; head= $("#head").click (function (){ $("#head").css ("background-color","black"); $("#head").css({ opacity: 0.9}); track3.play (); setTimeout(function(){ $("#head").css({ opacity: 0.0 }); $("#head").css("background-color",""); }, 300); }); shoulders= $("#shoulders").click (function (){ $("#shoulders").css ("background-color","cyan"); track3.play(); setTimeout(function() { $("#shoulders").css("background-color",""); }, 300); }); knees= $("#knees").click (function (){ $("#knees").css ("background-color","mediumPurple"); track3.play (); setTimeout(function(){ $("#knees").css("background-color", ""); }, 300); }); toes= $("#toes").click (function (){ $("#toes").css ("background-color","mediumSpringGreen"); track3.play(); setTimeout(function() { $("#toes").css("background-color", ""); }, 300); }) var round= 0; var player= [ ]; var simon=[ ]; var pat= ["head", "shoulders", "knees", "toes"]; $(".start").click(function (){ simon=[ ]; player=[ ]; round=0; additionalRound(); }) function additionalRound(){ round ++; $("h2").html("Round:" +round); setTimeout(function() { $("h2").html("HEAD, SHOULDERS, KNEES, AND TOES!"); },2660); sequence($('#clicks').val()); } function sequence (times){ for (i = 0; i < times; i++) { simon.push(pat[Math.floor (Math.random ()*4 )]); } blinkerBeats (simon); } function blinkerBeats(arr) { var timer = 0, interval = 800; arr.map(function(elem){ timer++; setTimeout(function(){ $('#'+elem).trigger('click'); }, timer * interval) }) } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label><input type="checkbox" id="head"> Head</label> <label><input type="checkbox" id="shoulders">Shoulders</label> <label><input type="checkbox" id="knees">Knees</label> <label><input type="checkbox" id="toes">Toes</label> <hr /> Times: <input type="number" value="6" id="clicks" /> <input type="button" value="Start" class="start" /> <h2>Click start!</h2>