正在努力设置Javascript类并在类内动态设置onclick事件

我正在努力完成这项任务。我得到的功能工作，所有的按钮将改变样式，以匹配一个被点击。但问题是代码的编写方式是错误的。我使用switch语句检查单击的按钮，然后运行另一个函数，该函数使用switch语句中的值更新所有按钮。以下是我在任务中得到的指示：

我试图创建一个button类来存储按钮的css类。但我不确定该类中还存储了什么，我一直在努力在该类中添加onclick事件

以下是我正在使用的引导按钮：

    <button type="button" class="btn buttonGap btn-primary">Primary</button>
    <button type="button" class="btn buttonGap btn-secondary">Secondary</button>
    <button type="button" class="btn buttonGap btn-success">Success</button>
    <button type="button" class="btn buttonGap btn-danger">Danger</button>
    <button type="button" class="btn buttonGap btn-warning">Warning</button>
    <button type="button" class="btn buttonGap btn-info">Info</button>
    <button type="button" class="btn buttonGap btn-light">Light</button>
    <button type="button" class="btn buttonGap btn-dark">Dark</button>

---

我认为你走的路是对的。看看：

onclick

是HTML按钮的一个属性，所以我希望您有

<button type="button" class="btn buttonGap btn-primary" onclick="onButtonClick(0)">Primary</button>
<button type="button" class="btn buttonGap btn-secondary" onclick="onButtonClick(1)">Secondary</button>
<button type="button" class="btn buttonGap btn-success" onclick="onButtonClick(2)">Success</button>
<button type="button" class="btn buttonGap btn-danger" onclick="onButtonClick(3)">Danger</button>
<button type="button" class="btn buttonGap btn-warning" onclick="onButtonClick(4)">Warning</button>
<button type="button" class="btn buttonGap btn-info" onclick="onButtonClick(5)">Info</button>
<button type="button" class="btn buttonGap btn-light" onclick="onButtonClick(6)">Light</button>
<button type="button" class="btn buttonGap btn-dark" onclick="onButtonClick(7)">Dark</button>

一些解释。让我们从

onload

开始，将HTML中的每个

按钮

元素映射到

按钮

对象，并将后者存储在全局

按钮

变量中。然后，当用户单击某个按钮时，您将调用一个全局函数-该函数不应位于

按钮

类中，因为它需要作用于所有按钮，因此，如果您在

按钮中有这个按钮，您将打破面向对象编程的封装和模块化概念，并且这个全局函数在每个
按钮
对象上调用
applyNewStyle

它解决了你的问题吗？请考虑将此答案标记为您的有效答案。
您的整个26行<代码>开关< /C> >语句可以被替换为“代码>返回”BTN-++ButoTrime.ToWORCaseCe（）；代码>@Marc谢谢，我真不敢相信你会这么做。但这仍然是一种错误的分配方式，我需要解析类中的每个按钮元素，并从该类中添加一个onclick事件。如果您想看到web应用程序在我的代码笔上运行，我需要让onclick事件在类中运行。我想我现在开始工作了，我在课堂上做了onclick活动。现在我只需要检查一下我的代码，看看是否有改进的方法。我相信您收到的指令可能意味着onclick处理程序逻辑必须在类内部。如果你有一个Button类，如果你有改变其他对象的逻辑，那将打破OOP的单一责任原则。每个按钮对象应该只负责自己。
<button type="button" class="btn buttonGap btn-primary" onclick="onButtonClick(0)">Primary</button>
<button type="button" class="btn buttonGap btn-secondary" onclick="onButtonClick(1)">Secondary</button>
<button type="button" class="btn buttonGap btn-success" onclick="onButtonClick(2)">Success</button>
<button type="button" class="btn buttonGap btn-danger" onclick="onButtonClick(3)">Danger</button>
<button type="button" class="btn buttonGap btn-warning" onclick="onButtonClick(4)">Warning</button>
<button type="button" class="btn buttonGap btn-info" onclick="onButtonClick(5)">Info</button>
<button type="button" class="btn buttonGap btn-light" onclick="onButtonClick(6)">Light</button>
<button type="button" class="btn buttonGap btn-dark" onclick="onButtonClick(7)">Dark</button>

class Button {
  constructor(coloring){
    this.coloring = coloring;
  }

  applyNewStyle(coloring) {
    var color = "btn-" + coloring.toLowerCase()
    button.classList.remove(button.classList[2])
    button.classList.add(color) 
  );        
}

var buttons = []

function onButtonClick(buttonIndex) {
  buttons.forEach(button => 
    button.applyNewStyle(buttons[buttonIndex].classList[2]);
  );
}

window.onload = function() {
  buttons = document.querySelectorAll('.btn.buttonGap')
    .map(button => new Button(button.classList[2]));
}