javascript - 切换类仅知道第一个选择的标签

$(document).ready(function(){
  $( "button.change" ).click(function() {
    $( "button.change.selected" );
    $(this).toggleClass("selected");
  });
  $( "button1.change" ).click(function() {
    $( "button1.change.selected1" );
    $(this).toggleClass("selected1");
  });
});

.button{
  font-family: Calibri, sans-serif;
  font-size:13px;
  font-weight: bold;
  width: 150px;
  height: 150px;
  background-image:url(ComputerI.png);//picture1 on
  background-repeat:no-reapeat;
}

.button1{
  font-family: Calibri, sans-serif;
  font-size:13px;
  font-weight: bold;
  width: 150px;
  height: 150px;
  background-image:url(calculusO.png);//picture2 on
  background-repeat:no-reapeat;
}

.selected {
  background:url(ComputerO.png);//picture1 off
}

.selected1 {
  background:url(calculusI.png);//picture2 off
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<button class="button change">Click to change image</button><br>
<br>
<button class="button1 change" id="button1 change">Click to change image</button><br>
<br>

这是我的代码，我有两个按钮


按钮1-开启/关闭图片1
按钮2-开启/关闭图片2


toggleClass功能仅在第一个按钮上起作用

我需要进行哪些更改才能使其正常工作？

最佳答案

我相信您的第一个选择器“ $（” button.change“）”将匹配类为“ change”的任何按钮-因此，这将匹配您的两个按钮。因此，当您仅单击按钮时，它可以正常工作（关闭picture1），但是如果您单击第二个按钮，它将与您的第一个选择器（因此关闭picture1）和第二个选择器（将图片2打开）相匹配。

因此，请执行以下操作：

$(document).ready(function() {
  $(".button.change").click(function() {
    $("button.change.selected");
    $(this).toggleClass("selected");
  });
  $(".button1.change").click(function() {
    $("button1.change.selected1");
    $(this).toggleClass("selected1");
  });
});

.button {
  font-family: Calibri, sans-serif;
  font-size: 13px;
  font-weight: bold;
  width: 150px;
  height: 150px;
  background-image: url(ComputerI.png); //picture1 on
  background-repeat: no-reapeat;
}

.button1 {
  font-family: Calibri, sans-serif;
  font-size: 13px;
  font-weight: bold;
  width: 150px;
  height: 150px;
  background-image: url(calculusO.png); //picture2 on
  background-repeat: no-reapeat;
}

.selected {
  background: url(ComputerO.png); //picture1 off
}

.selected1 {
  background: url(calculusI.png); //picture2 off
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<button class="button change">Click to change image</button><br>
<br>
<button class="button1 change" id="button1 change">Click to change image</button><br>
<br>