如何遍歷一個數組，該數組一次一個地觸發數組中每個項目的單擊事件

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>