javascript对象：变量全局无法在不同的函数中读取[关闭]

Question

我有这个脚本

var b = {
  c: {
    a: document.querySelector(".a"),
    init: function() {
      this.a.style.backgroundColor = "red";
      this.a.addEventListener("click", b.c.change);
    },
    change: function() {
      this.a.style.width = "100px";
    }
  }
}
b.c.init();

.a {
  width: 10px;
  height: 10px;
  background: black;
  cursor: pointer;
}

<div class="a"></div>

为什么 this.a 样式“取消定义”？？？

Answer 1

在更改事件处理程序中，this 指的是 dom 元素。所以只需将 this.a.style.... 更改为 this.style.... 。

var b = {
  c: {
    a: document.querySelector(".a"),
    init: function(){
      this.a.style.backgroundColor="red";
      this.a.addEventListener("click", b.c.change);
    },
    change: function(){
      this.style.width="100px";
    }
  }
}
b.c.init();

.a {
  width: 10px;
  height: 10px;
  background: black;
  cursor: pointer;
}

<div class="a"></div>

Answer 2

首先，在更改事件中，this 指向 DOM 元素而不是对象。所以你可以直接使用this更新样式。

第二，在a里面，this会指向c，所以不用b.c.change，你可以直接做this.change

var b = {
  c: {
    a: document.querySelectorAll(".a"),
    init: function() {
      for (var i = 0; i < this.a.length; i++) {
        this.a[i].style.backgroundColor = "red";
        this.a[i].addEventListener("click", this.change);
      }
    },
    change: function() {
      console.log(this.innerHTML)
      this.style.width = "100px";
    }
  }
}
b.c.init();

.a {
  width: 10px;
  height: 10px;
  background: black;
  cursor: pointer;
  margin: 5px;
  padding: 5px;
}

<div class="a">1</div>
<div class="a">2</div>
<div class="a">3</div>
<div class="a">4</div>
<div class="a">5</div>

Answer 3

尝试一次，这会奏效..

var b = {
  c: {
    a: document.getElementById("a"),
    init: function(){
      this.a.style.backgroundColor="red";
      this.a.addEventListener("click", b.c.change);
    },
    change: function(){
      this.style.width="100px";
    }
  }
}
b.c.init();

#a {
  width: 10px;
  height: 10px;
  background: black;
  cursor: pointer;
}

<div id="a"></div>