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

我一直在做关于Slack和其他方面的研究，但我无法找到我问题的答案。我觉得我缺乏一些面向对象的基本知识，这可能需要我花上几个小时的研究和编码才能找到答案。但不知何故，我对这可能是一个如此复杂的问题感到困惑

问题是: 我在一个页面上有两个具有相同类的按钮（这只是一个示例）。我创建JS来通过类函数处理行为。在构造函数中，我定义了一个我希望类指向的元素，即

child

。但是，我希望类在单击它们时分别指向两个

child

中的一个。但是，构造函数中的

this.child

始终指向两个

child

元素

你能帮我说说我做错了什么吗

const选择器={
childElement:“.child”
},
$=jQuery；
班童{
构造函数（）{
this.child=$（selectors.childElement）；
this.bindUiEvents（）；
}
bindUiEvents（）{
$（this.child）.on（'click'，this.addStyles）；
}
addStyles（）{
$（this.addClass（'colored'）；
}
}
新生儿（）
.child{
高度：100px；
宽度：100px；
边框：1px纯黑；
}
.儿童{
背景：蓝色；
}

弗斯特
第二
如果需要为每个按钮创建class
Child
的实例，则必须获取类外的元素

首先，我们修改子类以在实例化期间接受按钮

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在评论中所说的，您可以在不使用基于类的jibber jabber的情况下完成所有这些。但是我想假设你有其他原因来解释这个额外的复杂性
如果你需要为每个按钮创建一个class
Child
的实例，你必须得到类之外的元素

首先，我们修改子类以在实例化期间接受按钮

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在评论中所说的，您可以在不使用基于类的jibber jabber的情况下完成所有这些。但我想假设对于这种额外的复杂性还有其他原因
您知道
$（selectors.childElement）
返回匹配元素的数组吗？因此，如果有多个匹配项，您总是会得到多个匹配项。您是否有任何特定条件，哪一个对象应该指向哪个按钮。child？如果要使其变得比您需要的更复杂，只需使用选择器，
$（selectors.childElement）。on（'click'，this.addStyles），存储“子元素”没有任何好处。我发布的代码演示起来非常简单。我只需要学习如何使用类来分隔类的每个实例的逻辑。您知道
$（selectors.childElement）
返回匹配元素的数组吗？因此，如果有多个匹配项，您总是会得到多个匹配项。您是否有任何特定条件，哪一个对象应该指向哪个按钮。child？如果要使其变得比您需要的更复杂，只需使用选择器，
$（selectors.childElement）。on（'click'，this.addStyles），存储“子元素”没有任何好处。我发布的代码演示起来非常简单。我只需要学习如何使用类来分隔类的每个实例的逻辑。我对解决方案进行了修改，因为实际上，不需要将值传递给数组。而且，
每个
都需要两个值，否则，只有一个值被视为索引。我在下面发布了最后的代码（不幸的是，我不能在注释中发布它：/）@bakrall我已经修复了
.each（）
。我觉得没有必要把你的答案的实际实现放在这个线程中。你可以继续删除它们。您可以发表一条注释来描述您的实际操作。@bakrall
我对解决方案进行了修改，因为实际上，不需要将值传递给数组。
。其实有,；在99%的情况下，您希望将来能够访问您的实例。在哈瓦那·克拉拉（Habana Clara）的帮助下，将它们控制在武器范围内是一种很好的做法，我遵循了你的建议。我对解决方案进行了修改，因为实际上，不需要将值传递给数组。而且，
每个
都需要两个值，否则，只有一个值被视为索引。我在下面发布了最后的代码（不幸的是，我不能在注释中发布它：/）@bakrall我已经修复了
.each（）
。我觉得没有必要把你的答案的实际实现放在这个线程中。你可以继续删除它们。您可以发表一条注释来描述您的实际操作。@bakrall
我对解决方案进行了修改，因为实际上，不需要将值传递给数组。
。其实有,；在99%的情况下，您希望将来能够访问您的实例。哈瓦那·克拉拉，我听从了你的建议，把他们关在怀里是个好习惯。