Question

我有一份猫的名单。每个cat对象都有一个cat.clicks属性，用于记录猫图像被单击的次数。猫图像的onclick调用方法cat.clickCat。

但当然＆＃39;这个＆＃39;在clickCat方法中引用的是image元素而不是cat对象，它包含属性＆＃39; clicks＆＃39;。

如何显示和更新图片的点击次数？

＆＃13;

function Cat(src, name) {
  this.src = src;
  this.name = name;
  this.clicks = 0; //property recording no. of clicks
}

Cat.prototype.createCatItem = function() {
  let catDisplay = document.createElement("div");
  catDisplay.id = "catDisplay"
    let catName = document.createElement("h2");
    let catImg = document.createElement("img");
    let catCounter = document.createElement("div");
    catCounter.id = "clicker";
    catName.innerHTML = this.name;
    catImg.src = this.src;
    catImg.onclick = this.clickCat; //call the clickCat method
  catDisplay.appendChild(catName);
  catDisplay.appendChild(catImg);
  catDisplay.appendChild(catCounter);
  return catDisplay;
}

Cat.prototype.clickCat = function() {
  this.clicks += 1; //how to access the object property clicks from this method?
  let clickerDiv = document.getElementById("clicker")
  clickerDiv.innerHTML = ''
  clickerDiv.innerHTML = 'clicks = ' + this.clicks;
}

function App() {
  this.cats = [];
}

App.prototype.add = function(cat) {
  this.cats.push(cat)
}

App.prototype.listCats = function() {
  let container = document.getElementById("container");
  let ul = document.createElement("ul");
  for (let i=0; i<this.cats.length; i++){
    let li = document.createElement("li");
    li.innerHTML = this.cats[i].name;
    li.onclick = this.displayCat;
    ul.appendChild(li);
  }
  container.appendChild(ul);
}

App.prototype.displayCat = function() {
  let container = document.getElementById("container");
  let catDisplay = document.getElementById("catDisplay")
  let cats = app.cats;
  let chosenCat = cats.filter(cat => cat.name === this.innerHTML);
  let chosenCatItem = chosenCat[0].createCatItem();
  container.removeChild(catDisplay);
  container.appendChild(chosenCatItem);
  console.log(chosenCat);
}

App.prototype.showFirstCat = function() {
  let container = document.getElementById("container");
  let catDisplay = document.getElementById("catDisplay")
  let firstCat = app.cats[0].createCatItem();
  container.appendChild(firstCat);
}

let app = new App;

let tea = new Cat("http://placehold.it/350x150", "tea");
let snowball = new Cat("http://placehold.it/350x200", "snowball");
let triksy = new Cat("http://placehold.it/350x300", "triksy");
let vera = new Cat("http://placehold.it/350x350", "vera");
let jon = new Cat("http://placehold.it/350x400", "jon");


app.add(tea)
app.add(snowball)
app.add(triksy)
app.add(vera)
app.add(jon)

app.listCats();
app.showFirstCat();

＆＃13;

<div id="container">
    <h1>My Cat Clicker</h1>
</div>

＆＃13;

Answer 1

首先...谨防使用this ... this始终引用负责的对象当前来执行浏览器中的脚本...所以在你的情况下image负责执行click事件，并且没有名为clicks的属性..这就是clicks为NaN

的原因

一个好的做法是将其保存到变量中以避免在执行时替换系统（that=this）

    Cat.prototype.createCatItem = function() {
        let that=this; //preserving this value

        let catDisplay = document.createElement("div");
        catDisplay.id = "catDisplay"
        let catName = document.createElement("h2");
        let catImg = document.createElement("img");
        let catCounter = document.createElement("div");
        catCounter.id = "clicker";
        catName.innerHTML = this.name;
        catImg.src = this.src;
        catImg.onclick = function() {
            //alert(this);
            that.clicks += 1; //how to access the object property clicks from this method?
            let clickerDiv = document.getElementById("clicker")
            clickerDiv.innerHTML = ''
            clickerDiv.innerHTML = 'clicks = ' + that.clicks;
        }
        catDisplay.appendChild(catName);
        catDisplay.appendChild(catImg);
        catDisplay.appendChild(catCounter);
        return catDisplay;
    }

    //Cat.prototype.clickCat = function() {
    //    this.clicks += 1; //how to access the object property clicks from this method?
    //    let clickerDiv = document.getElementById("clicker")
    //    clickerDiv.innerHTML = ''
    //    clickerDiv.innerHTML = 'clicks = ' + this.clicks;
    //}

访问image元素的父对象属性

1 个答案: