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

时间:2018-06-15 23:11:29

标签: javascript html css

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

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

6 个答案:

答案 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)

&#13;
&#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;
&#13;
&#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");
}