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

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

//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[0].click();

如果这不起作用，我会尝试定位DOM中的项目。我们知道每张卡都添加到div＃felt的末尾。因此，如果我们可以将内部的第一个div作为目标，我们应该能够触发它上面的click事件。

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

（Idx）是什么意思

我希望这些评论有助于解释这一点。看起来变量idx只是用作i的扩展引用。在for循环中，writer创建一个带有一个参数（idx）的函数。 for循环有一个变量（i），它对于每个循环实例增加1。每次循环发生时，我都会以idx的形式传递给函数。

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

如何自动运行onclick事件

1 个答案: