0

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

3 回答 3

1

如果你想使用构造函数，你可以使用class. 您可以使用这样的构造函数（参见代码段），它接受 acolor和 a number。

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

最后，在创建盒子时，您需要提供构造函数 ( )定义的acolor和 a ：numbervar 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>

于 2018-07-31T11:50:56.587 回答
0

您可以在函数中传递参数clickMe并在警报框中使用它：

var box1 = {
clickMe: function (color, number) {
    var box = document.querySelector('.'+color);

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

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

        alert(str);

    });

  }
}

box1.clickMe('green', 1);
box1.clickMe('blue', 2);
box1.clickMe('orange', 3);
.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>

于 2018-07-31T11:45:45.833 回答
0

您可以使用 for 迭代元素（并添加一次事件侦听器）并使用this箭头函数( ()=>{}) 访问，如下所示：

var box = {
  color: ['Green', 'Blue', 'Orange'],
  number: [1, 2, 3],
  clickMe: function() {
    var colors = document.getElementsByClassName('box');

    for (let i = 0; i < colors.length; i++) {

      colors[i].addEventListener('click', () => {

        var str = 'This is box number ' + this.number[i] + ' and it is ' + this.color[i];

        alert(str);

      });
    }
  }

这里有一个完整的例子https://jsfiddle.net/25uLvstp/

这样，您可以一次定义所有框侦听器。

于 2018-07-31T12:08:23.060 回答