Question

我试图在我的弹出窗口中实现可切换按钮组。它有点...但不完全有效。这是代码，解释起来有点复杂，因此请启用代码段中的所有按钮，然后您将看到。是的，我知道。该代码是非常未经优化的，只是试图使其工作。谢谢你的帮助！：）

document.getElementById("off1").addEventListener("click", function() {
    if(document.getElementById("off1")) {
        document.getElementById("off1").id = "on";
    } else {
        document.getElementById("on").id = "off1";
        
    }
});
document.getElementById("off2").addEventListener("click", function() {
    if(document.getElementById("off2")) {
        document.getElementById("off2").id = "on";
    } else {
        document.getElementById("on").id = "off2";
        
    }
});
document.getElementById("off3").addEventListener("click", function() {
    if(document.getElementById("off3")) {
        document.getElementById("off3").id = "on";
    } else {
        document.getElementById("on").id = "off3";
        
    }
});
document.getElementById("off4").addEventListener("click", function() {
    if(document.getElementById("off4")) {
        document.getElementById("off4").id = "on";
    } else {
        document.getElementById("on").id = "off4";
        
    }
});
document.getElementById("off5").addEventListener("click", function() {
    if(document.getElementById("off5")) {
        document.getElementById("off5").id = "on";
    } else {
        document.getElementById("on").id = "off5";
        
    }
});
document.getElementById("off6").addEventListener("click", function() {
    if(document.getElementById("off6")) {
        document.getElementById("off6").id = "on";
    } else {
        document.getElementById("on").id = "off6";
        
    }
});
document.getElementById("off7").addEventListener("click", function() {
    if(document.getElementById("off7")) {
        document.getElementById("off7").id = "on";
    } else {
        document.getElementById("on").id = "off7";
        
    }
});
document.getElementById("off8").addEventListener("click", function() {
    if(document.getElementById("off8")) {
        document.getElementById("off8").id = "on";
    } else {
        document.getElementById("on").id = "off8";
        
    }
});

input {
    width: 95px;
    float:left;
    font-size: 12px; 
    border-radius: 2px;
    margin: 5px;
    padding: 3px;
}
#off1, #off2, #off3, #off4, #off5, #off6, #off7, #off8 {
    background-color: #101820FF;
    color: #fff;
    border:1px solid white;
}
#on {
    background-color: #FEE715FF;
    color:#101820FF;
    border: 1px solid #FEE715FF; 
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="../css/popup.css">
    </head>
    <body>
        <div class="item-toggle-group">
            <input type="button" id="off1" value="jackets">
            <input type="button" id="off2" value="shirts">
            <input type="button" id="off3" value="tops/sweaters">
            <input type="button" id="off4" value="sweatshirts">
            <input type="button" id="off5" value="pants">
            <input type="button" id="off6" value="hats">
            <input type="button" id="off7" value="bags">
            <input type="button" id="off8" value="accessories">
            <script src="../js/toggleButton.js"></script>
        </div>
    </body>
</html>

Answer 1

使用数据属性来标识按钮是否处于打开状态，并使用类来标识按钮。

HTML

<input type="button" class="button" value="jackets" data-on="0">
<input type="button" class="button" value="thing2" data-on="0">
<input type="button" class="button" value="thing3" data-on="0">
<input type="button" class="button" value="thing4" data-on="0">
<input type="button" class="button" value="thing5" data-on="0">

JavaScript

document.getElementsByClassName("button").addEventListener("click", function() {
    if(this.getAttribute("data-on") == "1") {
        this.setAttribute("data-on", "0");
    } else {
        this.setAttribute("data-on", "1");
    }
});

CSS

.button {
  ... css for buttons that are off
}

.button[data-on=1] {
  ... css for buttons that are on
}

使用类使其具有通用性，因此您可以随时添加按钮，而无需为该特定按钮添加事件监听器。

Answer 2

您不应该修改按钮元素的ID-一旦打开两个元素，您将拥有两个ID为“ on”的元素。此时，当您关闭其中的任何一个时，只有第一个ID为“ on”的元素才被设置为off状态（不一定是您单击以关闭的元素）。

最简单的解决方法是使用以下方法修改这些按钮元素的类（而不是ID）：

document.getElementById("off5").className = "on";

然后还将您的CSS更改为类（而不是ID）的样式

.on { /* styles here */  }

不是

#on { /* styles here */ }

Answer 3

改为使用类。然后，您只需要一个功能。单击按钮时，从所有元素中删除on类，然后将其添加到this元素

function highlight() {
  items.forEach(function(item) {
    item.classList.replace('on', 'off');
  });
  this.classList.replace('off', 'on');
}

var items = document.querySelectorAll(".off");
items.forEach(function(item) {
  item.addEventListener("click", highlight);
});

input {
    width: 95px;
    float:left;
    font-size: 12px; 
    border-radius: 2px;
    margin: 5px;
    padding: 3px;
}
.off {
    background-color: #101820FF;
    color: #fff;
    border:1px solid white;
}
.on {
    background-color: #FEE715FF;
    color:#101820FF;
    border: 1px solid #FEE715FF; 
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div class="item-toggle-group">
            <input type="button" class="off" value="jackets">
            <input type="button" class="off" value="shirts">
            <input type="button" class="off" value="tops/sweaters">
            <input type="button" class="off" value="sweatshirts">
            <input type="button" class="off" value="pants">
            <input type="button" class="off" value="hats">
            <input type="button" class="off" value="bags">
            <input type="button" class="off" value="accessories">
        </div>
    </body>
</html>

Answer 4

您可以使用id代替class，以便可以使用classList.toggle方法在特定按钮单击时切换on类。

document.querySelectorAll('.toggle').forEach(function(button) {
  button.addEventListener('click', function() {
    this.classList.toggle('on');
  })
})

input {
  width: 95px;
  float: left;
  font-size: 12px;
  border-radius: 2px;
  margin: 5px;
  padding: 3px;
}

.toggle {
  background-color: #101820FF;
  color: #fff;
  border: 1px solid white;
}

.on {
  background-color: #FEE715FF;
  color: #101820FF;
  border: 1px solid #FEE715FF;
}

<div class="item-toggle-group">
  <input type="button" id="off1" class="toggle" value="jackets">
  <input type="button" id="off2" class="toggle" value="shirts">
  <input type="button" id="off3" class="toggle" value="tops/sweaters">
  <input type="button" id="off4" class="toggle" value="sweatshirts">
  <input type="button" id="off5" class="toggle" value="pants">
  <input type="button" id="off6" class="toggle" value="hats">
  <input type="button" id="off7" class="toggle" value="bags">
  <input type="button" id="off8" class="toggle" value="accessories">
</div>

要删除同级元素上的on类，您可以创建一个函数，该函数将返回被单击元素的同级节点，并从每个同级节点中删除on类。

function getSiblings(el, nodes) {
  return [...nodes].filter(node => node != el)
}

document.querySelectorAll('.toggle').forEach(function(button) {
  button.addEventListener('click', function() {
    this.classList.toggle('on');

    getSiblings(this, this.parentNode.children).forEach(function(button) {
      button.classList.remove('on');
    })
  })
})

input {
  width: 95px;
  float: left;
  font-size: 12px;
  border-radius: 2px;
  margin: 5px;
  padding: 3px;
}

.toggle {
  background-color: #101820FF;
  color: #fff;
  border: 1px solid white;
}

.on {
  background-color: #FEE715FF;
  color: #101820FF;
  border: 1px solid #FEE715FF;
}

<div class="item-toggle-group">
  <input type="button" id="off1" class="toggle" value="jackets">
  <input type="button" id="off2" class="toggle" value="shirts">
  <input type="button" id="off3" class="toggle" value="tops/sweaters">
  <input type="button" id="off4" class="toggle" value="sweatshirts">
  <input type="button" id="off5" class="toggle" value="pants">
  <input type="button" id="off6" class="toggle" value="hats">
  <input type="button" id="off7" class="toggle" value="bags">
  <input type="button" id="off8" class="toggle" value="accessories">
</div>

Answer 5

我建议使用element.classList.toggle('toggle-class')

function doToggle(event) {
  event.target.classList.toggle('toggled');
}

var toggleInputs = document.getElementsByTagName('input');

for(var index in toggleInputs) {
  toggleInputs[index].onclick = doToggle;
}

.toggled {
  background: green;
}

<input type="button" value="toggle me 1"><br>
<input type="button" value="toggle me 2"><br>
<input type="button" value="toggle me 3"><br>
<input type="button" value="toggle me 4"><br>
<input type="button" value="toggle me 5"><br>
<input type="button" value="toggle me 6"><br>

JavaScript：切换按钮组无法正常工作

5 个答案: