访问图像元素的父对象属性

Question

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

当然，clickCat 方法中的 'this' 指的是图像元素，而不是包含属性 'clicks' 的 cat 对象。

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

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();

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

Answer 1

首先 .. 小心使用 this ... this 始终引用负责在浏览器中执行脚本的对象当前 ...所以在你的情况下image负责执行点击事件，它没有名为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;
    //}