javascript - 如何使用 Javascript 函数构造函数在每个框上添加点击警报？

Question

HTML 代码:

    <div class="box green">I'm green!</div>
    <div class="box blue">I'm blue!</div>
    <div class="box orange">I'm orange!</div>

CSS 代码在这里:

    .green { background-color: green; }
    .blue { background-color: dodgerblue; }
    .orange { background-color: orangered; }

此处的 JavaScript 代码使用对象字面量语法://想要对 box2 和 box3 应用相同的效果

var box1 = {
color: 'Green',
number: 1,
clickMe: function () {
    var green = document.querySelector('.green');
    var self = this;

    green.addEventListener('click', function () {

        var str = 'This is box number ' + self.number + ' and it is ' + self.color;

        alert(str);

    });

  }
}

box1.clickMe();

Answer 1

如果您想使用构造函数，可以使用类。您可以使用像这样的构造函数(请参阅代码片段)，它接受 color 和 number。

然后，您需要将 addEventListener 中的函数修改为箭头函数 (() => {})，以便它引用正确的 this 调用时。

最后，在创建盒子时，您需要提供由构造函数定义的 color 和 number (var myBox = new Box(COLOR, NUMBER )):

class Box {
  constructor(color, number) {
    this.color = color;
    this.number = number;
  }

  clickMe() {
    var elem = document.querySelector('.' + this.color);
    elem.addEventListener('click', () => {
      var str = 'This is box number ' + this.number + ' and it is ' + this.color;
      alert(str);
    });
  }
}


var box1 = new Box('green', 1);
var box2 = new Box('blue', 2);
var box3 = new Box('orange', 3);

box1.clickMe();
box2.clickMe();
box3.clickMe();

.green { background-color: green; }
.blue { background-color: dodgerblue; }
.orange { background-color: orangered; }

<div class="box green">I'm green!</div>
<div class="box blue">I'm blue!</div>
<div class="box orange">I'm orange!</div>