Question

$(function() {
  var model = {
    currentCat: null,
    cats: [{
        name: "Felix",
        clickCounter: 0,
        srcImage: "cat0.jpg"
      },
      {
        name: "Lucas",
        clickCounter: 0,
        srcImage: "cat1.jpg"
      },
      {
        name: "Martin",
        clickCounter: 0,
        srcImage: "cat2.jpg"
      },
      {
        name: "Pedro",
        clickCounter: 0,
        srcImage: "cat3.jpg"
      }
    ]
  };

  var octopus = {
    init: function() {
      indexView.init();
      displayView.init();
    },
    getCats: function() {
      return model.cats;
    },
    getCurrentCat: function() {
      return model.currentCat;
    },
    setCurrentCat: function(cat) {
      model.currentCat = cat;
    },
    updateClickCounter: function() {
      model.currentCat.clickCounter++;
      displayView.render();
    }
  };

  var displayView = {
    init: function() {
      this.imgSection = document.getElementById("imageSection");
      this.catImg = document.getElementById("cat-img");
      this.catName = document.getElementById("cat-name");
      this.catCounter = document.getElementById("cat-counter");

      this.catImg.addEventListener("click", function() {
        octopus.updateClickCounter();
      })
      this.render()
    },
    render: function() {
      var cat = octopus.getCurrentCat();

      this.catName.textContent = cat.name;
      this.catCounter.textContent = cat.clickCounter;
      this.catImg.src = cat.srcImage;
    }
  };


  var indexView = {
    init: function() {

      this.list = $("#list")
      this.render();

    },
    render: function() {
      cats = octopus.getCats();
      for (i = 0; i < cats.length; i++) {
        cat = cats[i];
        listElement = document.createElement("li");
        listElement.textContent = cat.name;

        listElement.addEventListener("click", (function(copyCat) {
          octopus.setCurrentCat(copyCat);
          displayView.render();
        })(cat));
      };
    }
  };



  octopus.init();
});

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Cat clicker</title>
  <link rel="stylesheet" href="css/cat.css">
  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" type="text/css" />
</head>

<body>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="js/cat.js"></script>

  <h1 id="header"> Gatitos! </h1>

  <div id="catIndex">
    <h2 id="indexTitle">Index</h2>
    <ul id="list">
      <!-- here we have the index with the cats names -->
    </ul>
  </div>
  <div id="imageSection">

    <h2 id="cat-name"></h2>
    <div id="cat-counter"></div>
    <img src="" id="cat-img">
  </div>

</body>

</html>

在displayView对象中，我只能在初始化它们的方法内访问通过getElementById获得的html元素（添加事件侦听器时，我可以访问catImg在init方法中）。当我尝试在render方法中访问那些元素时，问题就来了。运行此方法时，当您从init方法（this.catImg，this.catName和this.catCounter）调用所有元素时，它将返回undefined。为什么返回undefined？

Answer 1

您必须在事件处理程序中bind“此”，请检出Javascript scope addEventListener and this以了解如何将this的范围限定到事件侦听器。

无法使用其他方法初始化的acces元素

1 个答案: