Question

有一个简单的游戏。左侧和右侧是相同的，除了一件事：左侧有一个额外的脸。用户需要查找并单击该额外的面（lastChild）。它将触发功能以使面部数量加倍。

问题是 - 我游戏中的所有面孔都是lastChild。问题在哪里？

谢谢！

<!DOCTYPE <!DOCTYPE html>

<html>

<head>
  <title>Matching Game. Part 3.</title>
  <style>
    img {
      position: absolute;
    }
    div {
      position: absolute;
      width: 500px;
      height: 500px;
    }
    #rightSide {
      left: 500px;
      border-left: 1px solid black;
    }

  </style>

  <script>

function generateFaces(){

  var numberOfFaces = 5;
  //var theLeftSide = document.getElementById("leftSide");

    for(var i=0; i < numberOfFaces; i++) {
        var smileImage = document.createElement("img");
        smileImage.src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";

        var topPosition = Math.floor(Math.random()* 400) + 1;
        var leftPosition = Math.floor(Math.random()* 400) + 1;

        smileImage.style.top = topPosition + "px";
        smileImage.style.left = leftPosition + "px";
        leftSide.appendChild(smileImage);

    var leftSideImages = leftSide.cloneNode(true);
    leftSideImages.removeChild(leftSideImages.lastChild);
    rightSide.appendChild(leftSideImages);

    leftSide.lastChild.style.background = "red";

    var theBody = document.getElementsByTagName("body")[0];
    leftSide.lastChild.onclick = function nextLevel(event) {

    event.stopPropagation();

    numberOfFaces += 5;
    generateFaces();
    }          
    }
}  


</script>

</head>

<body onload = "generateFaces()">
   <h1>Matching Game</h1>
   <p>Click on the extra smiling face on the left.</p>

   <div id="leftSide"></div>

   <div id="rightSide"></div>     

</body>    

</html>

Answer 1

您将click事件绑定到循环中的每个元素。首先需要覆盖前一个处理程序，然后将其重新绑定到最后一个元素。

function generateFaces(){

  var numberOfFaces = 5;
  var leftSide = document.getElementById("leftSide");
var rightSide = document.getElementById("rightSide");
    for(var i=0; i < numberOfFaces; i++) {
        var smileImage = document.createElement("img");
        smileImage.src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";

        var topPosition = Math.floor(Math.random()* 400) + 1;
        var leftPosition = Math.floor(Math.random()* 400) + 1;

        smileImage.style.top = topPosition + "px";
        smileImage.style.left = leftPosition + "px";
        leftSide.appendChild(smileImage);

    var leftSideImages = leftSide.cloneNode(true);
    leftSideImages.removeChild(leftSideImages.lastChild);
    rightSide.appendChild(leftSideImages);

    leftSide.lastChild.style.background = "red";

    var theBody = document.getElementsByTagName("body")[0];         
    }
    var pics = document.getElementsByTagName("img");
    for(i=0;i<pics.length;i++){
    	pics[i].onclick = function() {
     		return false;
   		}
    }
    leftSide.lastChild.onclick = function nextLevel(event) {
    event.stopPropagation();
    numberOfFaces += 5;
    generateFaces();
    } 
}

    img {
      position: absolute;
    }
    div {
      position: absolute;
      width: 500px;
      height: 500px;
    }
    #rightSide {
      left: 500px;
      border-left: 1px solid black;
    }

<body onload = "generateFaces()">
   <h1>Matching Game</h1>
   <p>Click on the extra smiling face on the left.</p>

   <div id="leftSide"></div>

   <div id="rightSide"></div>     

</body>

匹配游戏。的JavaScript。 DOM lastChild

1 个答案: