javascript - 如何自动运行 onclick 事件

Question

抱歉，我仍在学习 JavaScript，请阅读 W3Cschools 的 javascript 和 Jquery，但他们不教很多内容。

我现在正在研究动画，我如何自动启动它而不是等待有人点击(事件监听器)，我尝试将它变成一个函数，但我一定做错了，还有1个什么(Idx) 的意思是，我理解 (id) 是 Html ID 元素，但不确定 Idx，在 google 上不容易找到。要阅读，事件监听器从底部的第 5 行开始，洗牌卡是从顶部的第 6 行(不确定这是否有帮助)，原始代码位于此处 http://www.the-art-of-web.com/javascript/css-animation/谢谢你的帮助。 问候。威廉。

var cardClick = function(id)
{
  if(started) {
  showCard(id);
  } else {
  // shuffle and deal cards
  card_value.sort(function() { return Math.round(Math.random()) -    0.5; });
  for(i=0; i < 16; i++) {
    (function(idx) {
      setTimeout(function() { moveToPlace(idx); }, idx * 100);
    })(i);
  }
  started = true;
}
};

// initialise

var stage = document.getElementById(targetId);
var felt = document.createElement("div");
felt.id = "felt";
stage.appendChild(felt);

// template for card
var card = document.createElement("div");
card.innerHTML = "<img src=\"/images/cards/back.png\">";

for(var i=0; i < 16; i++) {
var newCard = card.cloneNode(true);

newCard.fromtop = 15 + 120 * Math.floor(i/4);
newCard.fromleft = 70 + 100 * (i%4);
(function(idx) {
 newCard.addEventListener("click", function() { cardClick(idx); }, false);
})(i);

felt.appendChild(newCard);
cards.push(newCard);

Answer 1

我已经浏览了您的代码并添加了注释，以尝试帮助解释此文件中发生的情况:

//Declare card click function. Takes one parameter (id)
var cardClick = function(id){
  if(started) {
    showCard(id);
  } else {
    // shuffle and deal cards
    card_value.sort(function() { 
      return Math.round(Math.random()) -    0.5; 
    });
    for(i=0; i < 16; i++) {
      (function(idx) {
        setTimeout(function() { 
          moveToPlace(idx); 
        }, idx * 100);
      })(i);
    }
    started = true;
  }
};

// initialise

//set stage as reference to some element
var stage = document.getElementById(targetId);
//append a div with ID "felt" to the stage element
var felt = document.createElement("div");
felt.id = "felt";
stage.appendChild(felt);

// template for card
//declare card variable as a div with some html content
var card = document.createElement("div");
card.innerHTML = "<img src=\"/images/cards/back.png\">";

//Loop from 0 to 16, where i = current value
for(var i=0; i < 16; i++) {
  //create a copy of the card made earlier
  var newCard = card.cloneNode(true);

  //apply some attributes to the new card
  newCard.fromtop = 15 + 120 * Math.floor(i/4);
  newCard.fromleft = 70 + 100 * (i%4);

  //Create and run an anonymous function.
  //The function takes one parameter (idx)
  //The function is called using (i) as (idx)
  (function(idx) {
    //add click handler to the card element that triggers the card click
    //function with parameter (idx)
    newCard.addEventListener("click", function() { cardClick(idx); }, false);
  })(i);

  //add new card to the stage
  felt.appendChild(newCard);
  //add new card to an array of cards
  cards.push(newCard);
} //end for loop (I added this. It should be here)

how do I auto start this rather then wait for someone to click

我的做法是在 for 循环之后添加一个手动单击事件，该事件以具有事件处理程序的第一张卡为目标。因为卡片上没有设置 ID，所以我会尝试使用卡片添加到的数组。假设我们开始时卡片数组为空:

cards[0].click();

如果这不起作用，我会尝试定位 DOM 中的项目。我们知道每张卡片都添加到 div#felt 的末尾。因此，如果我们可以定位毛毡内的第一个 div，我们应该能够触发它的点击事件。

document.getElementByID("felt").firstChild.click();

what does (Idx) mean

我希望评论能帮助解释这一点。看起来变量 idx 只是用作 i 的扩展引用。在 for 循环中，作者创建了一个带有一个参数 (idx) 的函数。 for 循环有一个变量 (i)，对于循环的每个实例，该变量加一。每次循环发生时，i 都会作为 idx 传递到函数中。

我希望这有助于您了解这段代码的工作原理。