JavaScript:切换按钮组工作不正常_Javascript_Html_Css

JavaScript:切换按钮组工作不正常

javascript html css

JavaScript:切换按钮组工作不正常,javascript,html,css,Javascript,Html,Css,我试图在弹出窗口中实现一个可切换按钮组。它有点。。。但并非完全如此。这是代码，解释起来有点复杂，所以请启用代码段中的所有按钮，然后您将看到。是的，我知道。代码是非常不可选择的，只是试图让它工作。谢谢你的帮助！： document.getElementByIdoff1.addEventListenerclick，函数{ ifdocument.getElementByIdoff1{ document.getElementByIdoff1.id=on； }否则{ document.getEleme

我试图在弹出窗口中实现一个可切换按钮组。它有点。。。但并非完全如此。这是代码，解释起来有点复杂，所以请启用代码段中的所有按钮，然后您将看到。是的，我知道。代码是非常不可选择的，只是试图让它工作。谢谢你的帮助！：

使用数据属性标识按钮是否打开，使用类标识按钮

Html

CSS

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

使用数据属性来标识按钮是否打开，使用类来标识按钮

Html

CSS

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

您不应该修改按钮元素的ID-一旦打开两个按钮元素，就有两个具有相同ID“on”的元素。此时，当您关闭其中任何一个元素时，只有ID为“on”的第一个元素被设置回关闭状态，而不一定是您单击以关闭的元素

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

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

然后还将CSS更改为按类而不是按ID设置样式

.on { /* styles here */  }

不是

您不应该修改按钮元素的ID-一旦打开两个按钮元素，您就有两个具有相同ID“on”的元素。此时，当您关闭其中任何一个元素时，只有ID为“on”的第一个元素被设置回关闭状态，而不一定是您单击以关闭的元素

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

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

然后还将CSS更改为按类而不是按ID设置样式

.on { /* styles here */  }

不是

改用类。那么您只需要一个函数。单击按钮时，从所有元素中删除on类，然后将其添加到此元素中

功能亮点{ items.forEachfunctionitem{ 项。类列表。替换“开”、“关”； }; 这个.classList.替换为'off'，'on'； } var items=document.queryselectoral.off； items.forEachfunctionitem{ item.AddEventListener单击，高亮显示； }; 输入{ 宽度：95px；浮动：左；字体大小：12px；边界半径：2px；保证金：5px；填充：3倍； } .关{ 背景色：101820FF；颜色：fff；边框：1px纯白； } .在{ 背景色：FEE715FF；颜色：101820FF；边框：1px实心FEE715FF； }

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

document.querySelectorAll'.toggle'.forEachfunctionbutton{ 按钮。addEventListener“单击”功能{ 这个.classList.toggle'on'； } } 输入{ 宽度：95px；浮动：左；字体大小：12px；边界半径：2px；保证金：5px；填充：3倍； } .切换{ 背景色：101820FF；颜色：fff；边框：1px纯白； } .在{ 背景色：FEE715FF；颜色：101820FF；边框：1px实心FEE715FF； } 您可以使用class来代替id，这样您就可以使用classList.toggle方法在特定按钮单击时切换类

document.querySelectorAll'.toggle'.forEachfunctionbutton{ 按钮。addEventListener“单击”功能{ 这个.classList.toggle'on'； } } 输入{ 宽度：95px；浮动：左；字体大小：12px；边界半径：2px；保证金：5px；填充：3倍； } .切换{ 背景色：101820FF；颜色：fff；边框：1px纯白； } .在{ 背景色：FEE715FF；颜色：101820FF；边框：1px实心FEE715FF； } 我建议使用element.classList.toggle'toggle-class'

函数doToggleevent{ event.target.classList.toggle'toggled； } var-toggleInputs=document.getElementsByTagName'input'； toggleInputs中的forvar索引{ toggleInputs[index].onclick=doToggle； } .切换{ 背景：绿色； } 我建议使用element.classList.toggle'toggle-class'

改用类。那么您只需要一个函数。当您单击按钮时，请从所有元素中删除on类，然后将其添加到此元素中。您能详细解释一下吗？请改用类。那么您只需要一个函数。当您单击按钮时，请从所有元素中删除on类，然后将其添加到此元素中。您能详细解释一下吗？单击时，这不会取消选择其他按钮。不，不，这是正确的。这是我的错，我应该更好地表达自己。我们的目标是启用多个按钮。@stax在这种情况下，您只需删除GetSides部分，其余部分的工作方式相同。@stax不客气，我已经在answer中编写了这两个选项，以防万一。还请记住，id必须是唯一的，这样整个页面上只能有一个相同的id，例如，多个id将是无效的html。这不会在单击时取消选择其他按钮。不，不，这是正确的。这是我的错，我应该更好地表达自己。我们的目标是启用多个按钮。@stax在这种情况下，您只需删除GetSides部分，其余部分的工作方式相同。@stax不客气，我已经在answer中编写了这两个选项，以防万一。还要记住，id必须是唯一的，这样整个页面上只能有一个相同的id，例如，多个id将是无效的html。

.on { /* styles here */  }

#on { /* styles here */ }