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

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)
  })
}

目前，simon.push()函数中的sequence()只会向数组添加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>