这个问题很难在标题中总结,但我所拥有的是一组具有班级panel
的元素。当我点击面板时,我会向其中添加一个open
类。如果另一个open
已经拥有panel
类,我还想删除open
课程。
以下是代码:
const panels = document.querySelectorAll('.panel');
function toggleOpen() {
this.classList.toggle('open');
}
panels.forEach(panel => panel.addEventListener('click', toggleOpen));
现在我可以将open
类添加到我想要的多个面板中,但我只希望一个面板一次拥有open
类。
任何帮助都没有如何实现这个目标?
答案 0 :(得分:1)
最有效的方法是缓存当前选择的DOM节点:
const panels = document.querySelectorAll('.panel');
let openedPanel = null;
function toggleOpen() {
if (openedPanel)
openedPanel.classList.remove('open');
this.classList.add('open');
openedPanel = this;
}
panels.forEach(panel => panel.addEventListener('click', toggleOpen));
如上所述,委托事件会更有效率,所以如果所有面板共享一些祖先,你应该将事件监听器添加到该祖先,然后从事件监听器执行以下操作:
toggleOpen({target}) {
const panel = target.closest('.panel')
if (openedPanel)
openedPanel.classList.remove('open');
panel.classList.add('open');
openedPanel = panel;
}
但正如所说,他们需要分享共同的祖先。
答案 1 :(得分:0)
因为你只想一次打开一个。您可以通过获取具有类open
的元素直接定位该元素,定位第一个元素并删除类open
,然后再将其添加到所选元素。
let opened = document.getElementsByClassName('open')[0];
if(opened!=undefined)
opened.classList.toggle('open');
这样您就不必循环或保存额外的全局变量。
const panels = document.querySelectorAll('.panel');
function toggleOpen() {
let opened = document.getElementsByClassName('open')[0];
if(opened!=undefined)
opened.classList.toggle('open');
this.classList.toggle('open');
}
panels.forEach(panel => panel.addEventListener('click', toggleOpen));
.panel {
width: 50px;
height: 50px;
margin: 1px;
background-color: aquamarine;
}
.open {
background-color: tomato;
}
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
答案 2 :(得分:0)
var doc = document;
var panelButtons = doc.querySelectorAll(".panel");
for (var i = 0; i < panelButtons.length; i++) {
panelButtons[i].addEventListener("click", function (evt) {
clearBlueFromButtons();
evt.target.classList.add("blue");
});
}
function clearBlueFromButtons(){
for (var i = 0; i < panelButtons.length; i++) {
panelButtons[i].classList.remove("blue");
}
}
&#13;
.blue{
background: blue;
}
&#13;
<button class="panel">click me</button>
<button class="panel">click me</button>
<button class="panel">click me</button>
<button class="panel">click me</button>
<button class="panel">click me</button>
<button class="panel">click me</button>
<button class="panel">click me</button>
<button class="panel">click me</button>
&#13;
答案 3 :(得分:0)
您可以在变量中设置上次打开的面板的引用,然后在打开另一个面板时删除类名“open”,在示例下面:
// select all panels
const panels = document.querySelectorAll('.panel');
// define variable for the last clicked panel
let lastOpenedPanel;
/*
* Add the open class name for the current panel and remove it from the previous one
*/
function toggleOpen(
{
this.classList.toggle('open');
setLastOpenedTab(this);
}
/*
* Set the last opened tab and remove the open class from the previous one
*/
function setLastOpenedTab(context) {
if(lastOpenedPanel){
lastOpenedPanel.classList.remove('open');
}
lastOpenedPanel = context;
}
panels.forEach(panel => panel.addEventListener('click', toggleOpen))
我建议使用javascript module pattern来更好地整理和分享您的功能
我还建议使用Jsdoc更好地为您的javascript代码添加文档
请注意,IE9不支持属性“classList”: https://www.w3schools.com/howto/howto_js_toggle_class.asp
答案 4 :(得分:-1)
尝试在toggleOpen函数中的“this.classList.toggle”之前添加这些行:
<form name="myForm" action="http://www.severien.com/grit/formecho.php" target="_blank" method="POST" onsubmit="return validateForm(this)">
<fieldset>
<legend>Personal Info:</legend>
First Name:
<br><input class="input" type="text" name="firstname" required min="2" maxlength="20"><br> Last Name:
<br><input class="input" type="text" name="lastname" required min="2" maxlength="20"><br> Color:
<br><input class="input" type="text" name="color" maxlength="20"> <br><b>
Money</b> in my pocket:<br> <input type="number" name="money" required max="1000000"><br>
<input type="submit" value="Submit">
</fieldset>
</form>
答案 5 :(得分:-3)
使用if语句检查元素是否已打开&#34;打开&#34;和&#34;小组&#34;然后删除open类。以下是伪代码:
if ((element.classList.contains(open)) == True && (element.classList.contains(panel))){
element.classList.remove("open");
}