Question

这个问题很难在标题中总结，但我所拥有的是一组具有班级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类。

任何帮助都没有如何实现这个目标？

Answer 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;
}

但正如所说，他们需要分享共同的祖先。

Answer 2

因为你只想一次打开一个。您可以通过获取具有类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>

Answer 3

＆＃13;

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;

Answer 4

您可以在变量中设置上次打开的面板的引用，然后在打开另一个面板时删除类名“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

Answer 5

尝试在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>

Answer 6

使用if语句检查元素是否已打开＆＃34;打开＆＃34;和＆＃34;小组＆＃34;然后删除open类。以下是伪代码：

if ((element.classList.contains(open)) == True && (element.classList.contains(panel))){
    element.classList.remove("open");
}

从一个元素中删除类，同时使用javascript

6 个答案: