当页面上有一组元素时，如何将单个元素传递给 Class 构造函数？

Question

我一直在研究 Slack 和其他地方，但我找不到问题的答案。我觉得我缺乏一些 OOP 的基础知识，在我得到答案之前可能需要花费数小时的研究和编码。但不知何故，我很困惑，这可能是一个如此复杂的问题。

问题是：我在一个页面上有两个具有相同 class 的按钮（这只是示例）。我创建 JS 来通过 Class 函数处理行为。在构造函数中，我定义了一个我希望 Class 指向的元素，即 child。但是，我希望 Class 在单击它们时分别指向两个 child 之一。但是，构造函数中的 this.child 总是指向两个 child 元素。

你能帮忙告诉我哪里做错了吗？

const selectors = {
 childElement: '.child'
},
$ = jQuery;

class Child {
  constructor() {
    this.child = $(selectors.childElement);
    this.bindUiEvents();
  }
  
  bindUiEvents() {
   $(this.child).on('click', this.addStyles);
  }
  
  addStyles() {
   $(this).addClass('coloured');
  }
}

new Child();

.child {
  height: 100px;
  width: 100px;
  border: 1px solid black;
}

.child.coloured {
  background: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
<button class="child">First</button>
<button class="child">Second</button>
</div>

Answer 1

如果需要为每个按钮创建class Child的实例，则必须获取class之外的元素。

首先我们修改 Child class 以在实例化期间接受按钮。

class Child {
  constructor(child) {
    this.child = child; //you would want to pass a single element here
    this.bindUiEvents();
  }

  bindUiEvents() {
    $(this.child).on('click', this.addStyles);
  }

  addStyles() {
    $(this.child).addClass('.coloured');
  }
}

然后我们在外面迭代每个按钮

const buttons = $('.child');
const arry = []; //we'll put each Child instance here

//iterate on each button
buttons.each((idx, b) => {
   const clss = new Child(b); //pass each button element to their own Child class
   arry.push(clss); //add in arry for later access;
})

正如@Liam 在评论中所说，您可以在没有所有这些基于 class 的 jibber jabber 的情况下完成所有这些。但我只是假设你有其他原因导致这种额外的复杂性

当页面上有一组元素时，如何将单个元素传递给 Class 构造函数？

How to pass a single element to a Class constructor when I have a group of elements on a page?

javascript

jquery

class

instance