我该怎么做，如果一个按钮被切换，其他按钮保持不变（学习 dom 操作）

Question

我正在学习 DOM 操作，我制作了 3 个按钮，它们在单击时会改变它们的样式，但是我想知道如何才能做到这一点，以便当我单击其中一个按钮时，其他按钮会恢复到原来的状态白色背景样式，以便这 3 个按钮中只有 1 个可以保持单击状态。对不起，如果我没有解释正确......我尝试了很长时间我在谷歌上搜索了很多，我实施的逻辑可能有些不对。这个想法就像我希望它像您可以 select 只有 3 个按钮之一一样被检查。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="center">
        <button class="buttons-for-the-books" id="testerbuton">Choose that one</button>
        <button class="buttons-for-the-books" id="testerbuton2">Choose that one</button> 
        <button class="buttons-for-the-books" id="testerbuton3">Choose that one</button>
        </div>
          <style>
          .buttons-for-the-books{
            border: 3px solid #191919;
            background-color: white;
            height:42px;
            margin:auto;
            cursor: pointer;
          }

        </style>
    <script>
// Button 1 
 var valueto = "off";
      var testerbutona = document.getElementById("testerbuton");
              testerbutona.addEventListener('click',function(){
              if(valueto === "off" && valueto2 === "off2" && valueto3 === "off3"){
              testerbutona.style.backgroundColor ="black";
              testerbutona.style.border ="3px solid white";
              testerbutona.style.color ="white";
              valueto = "on";
              }
              else if(valueto === "on" || valueto2 === "on2" || valueto3 ==="on3"){
                   testerbutona.style.backgroundColor ="white"; 
                  testerbutona.style.border ="3px solid black";
                   testerbutona.style.color ="black";
                    valueto = "off";                                  
                        }
            })
// Button 1 


// Button 2

var valueto2 = "off2";
      var testerbutona2 = document.getElementById("testerbuton2");
     
        testerbutona2.addEventListener('click',function(){
              if(valueto2 === "off2" && valueto === "off" && valueto3 === "off3"){
              testerbutona2.style.backgroundColor ="black";
              testerbutona2.style.border ="3px solid white";
              testerbutona2.style.color ="white";
              valueto2 = "on2";
              }
              else if(valueto2 === "on2" || valueto === "on" || valueto === "on3"){
                   testerbutona2.style.backgroundColor ="white"; 
                  testerbutona2.style.border ="3px solid black";
                   testerbutona2.style.color ="black";
                    valueto2 = "off2";                                  
                        }
            })

// Button 2

// Button 3
var valueto3 = "off3";
      var testerbutona3 = document.getElementById("testerbuton3");
              testerbutona3.addEventListener('click',function(){
              if(valueto3 === "off3" && valueto === "off" && valueto2 === "off2"){
              testerbutona3.style.backgroundColor ="black";
              testerbutona3.style.border ="3px solid white";
              testerbutona3.style.color ="white";
              valueto3 = "on3";
              }
              else if(valueto3 === "on3" || valueto === "on" || valueto2 === "on2"){
                   testerbutona3.style.backgroundColor ="white"; 
                  testerbutona3.style.border ="3px solid black";
                   testerbutona3.style.color ="black";
                    valueto3 = "off3";                                  
                        }
            })
// Button 3
    </script>


</html>

Answer 1

是这样的？

const buttons = document.querySelectorAll('.buttons-for-the-books');

buttons.forEach(function(button){
  button.addEventListener('click', function(event){
    
    buttons.forEach(function(button){
      button.style.backgroundColor = '#fff';
      button.style.color = '#000';
    });
    
    this.style.backgroundColor = '#000';
    this.style.color = '#fff';
  });
});

.buttons-for-the-books{
    border: 3px solid #191919;
    background-color: white;
    height:42px;
    margin:auto;
    cursor: pointer;
}

<div class="center">
    <button class="buttons-for-the-books" id="testerbuton">Choose that one</button>
    <button class="buttons-for-the-books" id="testerbuton2">Choose that one</button> 
    <button class="buttons-for-the-books" id="testerbuton3">Choose that one</button>
</div>

我使用 querySelector select 所有带有 class 'buttons-for-the-books' 的按钮，然后为每个按钮提供点击监听器。

Answer 2

如果您将事件侦听器添加到容器中，并通过 class 缓存按钮，您可以通过简单地迭代按钮、删除新的“选定”按钮来避免大量代码 class 如果他们有，然后将“已选择”class 添加到被单击的按钮。

const container = document.querySelector('.container');
const buttons = container.querySelectorAll('.buttons-for-the-books');

container.addEventListener('click', handleClick, false);

function handleClick(e) {
  buttons.forEach(button => {
    button.classList.remove('selected');
  });
  e.target.classList.add('selected');
};

.buttons-for-the-books { border: 3px solid #191919; background-color: white; height: 42px; margin: auto; cursor: pointer; }
.selected { background-color: black; color: white; }

<div class="container">
  <button class="buttons-for-the-books">Choose that one</button>
  <button class="buttons-for-the-books">Choose that one</button>
  <button class="buttons-for-the-books">Choose that one</button>
</div>

Answer 3

        <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .buttons-for-the-books {
            border: 3px solid #191919;
            background-color: white;
            height: 42px;
            margin: auto;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="center">
        <button class="buttons-for-the-books" id="testerbuton">Choose that one</button>
        <button class="buttons-for-the-books" id="testerbuton2">Choose that one</button>
        <button class="buttons-for-the-books" id="testerbuton3">Choose that one</button>
    </div>
    <script>
        var valueto = "off";
        var valueto2 = "off";
        var valueto3 = "off";
        var testerbutona = document.getElementById("testerbuton");
        var testerbutona2 = document.getElementById("testerbuton2");
        var testerbutona3 = document.getElementById("testerbuton3");
        var button = document.getElementsByClassName('buttons-for-the-books');
        testerbutona.addEventListener('click', function () {
            valueto = "on";
            if (valueto2 === "on" || valueto3 === "on") {
                testerbutona2.style.backgroundColor = "white";
                testerbutona2.style.border = "3px solid black";
                testerbutona2.style.color = "black";
                testerbutona3.style.backgroundColor = "white";
                testerbutona3.style.border = "3px solid black";
                testerbutona3.style.color = "black";
                valueto2 === "off";
                valueto3 === "off";
            }
            testerbutona.style.backgroundColor = "black";
            testerbutona.style.border = "3px solid white";
            testerbutona.style.color = "white";
        })
        testerbutona2.addEventListener('click', function () {
            valueto2 = "on";
            if (valueto === "on" || valueto === "on") {
                testerbutona.style.backgroundColor = "white";
                testerbutona.style.border = "3px solid black";
                testerbutona.style.color = "black";
                testerbutona3.style.backgroundColor = "white";
                testerbutona3.style.border = "3px solid black";
                testerbutona3.style.color = "black";
                valueto === "off";
                valueto3 === "off";
            }
            testerbutona2.style.backgroundColor = "black";
            testerbutona2.style.border = "3px solid white";
            testerbutona2.style.color = "white";
        })
        testerbutona3.addEventListener('click', function () {
            valueto3 = "on";
            if (valueto === "on" || valueto2 === "on2") {
                testerbutona.style.backgroundColor = "white";
                testerbutona.style.border = "3px solid black";
                testerbutona.style.color = "black";
                testerbutona2.style.backgroundColor = "white";
                testerbutona2.style.border = "3px solid black";
                testerbutona2.style.color = "black";
            }
            valueto === "off";
            valueto2 === "off";
            testerbutona3.style.backgroundColor = "black";
            testerbutona3.style.border = "3px solid white";
            testerbutona3.style.color = "white";

        })
    </script>
</body>

</html>

我该怎么做，如果一个按钮被切换，其他按钮保持不变（学习 dom 操作）

How can I do so that if one button is toggled other buttons stay untoggled (learning dom manipulation)

javascript

events

button

dom-events