如何自动运行 onclick 事件

Question

抱歉，我还在学习 JavaScript，阅读 W3Cschools javascript 和 Jquery，但他们没有教很多东西。

我现在正在学习动画，我如何自动启动它而不是等待某人点击（事件监听器），我试图将它变成一个函数，但我一定做错了，还有 1 个什么(Idx) 的意思是，我理解 (id) 是 Html ID 元素但不确定 Idx，在谷歌上不容易找到。要阅读，事件侦听器从底部的第 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

我浏览了您的代码并添加了 cmets 来尝试帮助解释此文件中发生的情况：

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

如何自动启动而不是等待某人点击

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

cards[0].click();

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

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

(Idx) 是什么意思

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

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