更改所有点击按钮的颜色

Question

我在以下形式的HTML页面中有一组按钮：

<button
      id="testID"
      mat-mini-fab
      ngClass="list-button"
      (click)="onClick($event)"
    >
      Press
    </button>

我尝试更改属于.list-button类的每个按钮的颜色，然后使用以下CSS代码单击它：

.list-button:focus {
  background-color: #7d698d;
}

但是，当按钮i的颜色i的颜色i单击每次更改 （所有先前单击的按钮的颜色也会更改为原始颜色）。 我该如何解决？我希望所有单击的按钮保持其新颜色。

我还尝试为此类的按钮分配一个ID，并在onClick（）方法中更改其颜色，但没有成功。同样的问题仍然存在。你能帮我吗？

  onclick(event: any) {
    const btn = document.getElementById('testID');
    if (btn) btn.style.backgroundColor = '#7d698d';
  }

Answer 1

• id必须是唯一的，
• 您可以使用该函数并通过el，它将this作为参数函数函数onclick（el）{.............. 并使用它onclick（this）
• 无需获得id您可以直接使用el.style或event .target.Style请参阅下一个示例

function onClick(el){
  el.style.backgroundColor = '#7d698d';
}

<button
  id="testID-1"
  mat-mini-fab
  ngClass="list-button"
  onclick="onClick(this)"
>
  Press
</button>

<button
  id="testID-2"
  mat-mini-fab
  ngClass="list-button"
  onclick="onClick(this)"
>
  Press
</button>

另外您可以使用该功能并通过event等于event作为参数函数函数onclick（event）{..... 。}并使用 onclick（event）

function onClick(event){
  event.target.style.backgroundColor = '#7d698d';
}

<button
  id="testID-1"
  mat-mini-fab
  ngClass="list-button"
  onclick="onClick(event)"
>
  Press
</button>

<button
  id="testID-2"
  mat-mini-fab
  ngClass="list-button"
  onclick="onClick(event)"
>
  Press
</button>

Answer 2

您需要获取发射事件的按钮的ID

onclick(event: any) {
  const btn = document.getElementById(event.target.id);
  if (btn) btn.style.backgroundColor = '#7d698d';
}

Answer 3

单击另一个按钮后，先前单击按钮的颜色重置的颜色是将焦点设置在最后一个单击按钮上的原因。尝试在Venkatesh答案中使用代码。

Answer 4

无需JS。在样式表中使用focus选择器。

：focus 允许在接受键盘事件或其他用户输入的元素上进行选择。

〜 w3

button.list-button:focus {
  background-color: #7d698d;
  color: white;
}

<button class="list-button">Click</button>

用JS编辑〜。此方法使用.querySelectorAll（“ button”）并每次单击按钮（s）时切换样式的类.focus。有多个按钮时，这很好。

// Get all the elements on the basis of query selector (button)
let btn = document.querySelectorAll("button");

for (var i = 0; i < btn.length; i++) {
  (function(index) {
    btn[index].addEventListener("click", function() {
      console.log("Clicked Button: " + index);

      let isPresent = false;

      // Checks if the class is present or not
      this.classList.forEach(function(e, i) {
        if (e == "focus") {
          isPresent = true;
        } else {
          isPresent = false;
        }
      });

      // Toggles the presence of class (.focus) on the basis of the isPresent variable
      if (isPresent) {
        this.classList.remove("focus");
      } else {
        this.classList.add("focus");
      }
    });
  })(i);
}

.focus {
  background-color: #7d698d;
  color: white;
  cursor: pointer;
}

<button id="btn">Click</button>
<button id="btn">Click</button>
<button id="btn">Click</button>