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 样式 "undefine"???

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

试一次就可以了..

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>

Answer 3

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

更新样式

其次，在a里面，this会指向c，所以可以直接this.change[=21=而不是b.c.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>

javascript 对象：变量全局不能在不同的函数中读取

javascript object: variable global can not read in different function

javascript

variables

styles

object

undefined