javascript - jQuery 按钮更改类

Question

我写了下面的代码，当你点击按钮时，整个样式将会改变。

$(".Button1").click(function() {
  $(this).toggleClass('Button1Changed');
});

.Button1 {
  background-color:#000000;
  color:#ffffff;
}

.Button1Changed {
  background-color:#ff0000;
  color:#ffffff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button class="Button1">Button 1 - Click</button>

但现在我需要添加一些新按钮，如下面的代码。我希望当我单击“按钮2”时，“按钮1”的样式再次更改为第一类!或者当我点击“按钮3”时，按钮2的样式再次改变&...

我该怎么做？!

$(".Button1").click(function() {
  $(this).toggleClass('Button1Changed');
});

.Button1 {
  background-color:#000000;
  color:#ffffff;
}

.Button1Changed {
  background-color:#ff0000;
  color:#ffffff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button class="Button1">Button 1 - Click</button>
<button class="Button1">Button 2 - Click</button>
<button class="Button1">Button 3 - Click</button>
<button class="Button1">Button 4 - Click</button>

Answer 1

您可以使用.not()排除当前元素，即this方法和.removeClass()来自其他元素。

  $(".Button1").not(this).removeClass('Button1Changed'); 

$(".Button1").click(function() {
  $(".Button1").not(this).removeClass('Button1Changed');
  $(this).toggleClass('Button1Changed');
});

.Button1 {
  background-color: #000000;
  color: #ffffff;
}

.Button1Changed {
  background-color: #ff0000;
  color: #ffffff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button class="Button1">Button 1 - Click</button>
<button class="Button1">Button 2 - Click</button>
<button class="Button1">Button 3 - Click</button>
<button class="Button1">Button 4 - Click</button>