Javascript 添加其他类单击

例如，我得到了这个类

“ind open1”

，我想为

面板添加一个额外的类

类，正好用于那些具有该类的块

例如，我单击

indopen0

和

面板

添加类

面板当前

，但如果类已删除，则删除

<div class="ind open0" onclick="someFunction(this)">
   <div class="panel"></div>
</div>
<div class="ind open0" onclick="someFunction(this)">
   <div class="panel"></div>
</div>
<div class="ind open1" onclick="someFunction(this)">
   <div class="panel"></div>
</div>
<div class="ind open1" onclick="someFunction(this)">
   <div class="panel"></div>
</div>
<div class="ind open2" onclick="someFunction(this)">
   <div class="panel"></div>
</div>
<div class="ind open2" onclick="someFunction(this)">
   <div class="panel"></div>
</div>

function someFunction(obj) {
        alert($(obj).attr('class'));  //ind open1
    }

如果我单击

indopen1

class

 <div class="ind open0" onclick="someFunction(this)">
       <div class="panel current"></div>
    </div>
    <div class="ind open0" onclick="someFunction(this)">
       <div class="panel current"></div>
    </div>


   <div class="ind open1" onclick="someFunction(this)">
   <div class="panel"></div>
</div>
<div class="ind open1" onclick="someFunction(this)">
   <div class="panel"></div>
</div>
<div class="ind open2" onclick="someFunction(this)">
   <div class="panel"></div>
</div>
<div class="ind open2" onclick="someFunction(this)">
   <div class="panel"></div>
</div>

<div class="ind open0" onclick="someFunction(this)">
   <div class="panel"></div>
</div>
<div class="ind open0" onclick="someFunction(this)">
   <div class="panel"></div>
</div>
enter code here
<div class="ind open1" onclick="someFunction(this)">
       <div class="panel current"></div>
    </div>
    <div class="ind open1" onclick="someFunction(this)">
       <div class="panel current"></div>
    </div>
    <div class="ind open2" onclick="someFunction(this)">
   <div class="panel"></div>
</div>
<div class="ind open2" onclick="someFunction(this)">
   <div class="panel"></div>
</div>

在这里输入代码

查看此代码笔：

HTML JS

---

查看此代码笔：

HTML JS

---

你所说的：但是如果类已经删除了，那么它是什么意思？如果类“current”是，那么它必须是deletedAre，你可以查找这个=>

$（“.panel”）。toggleClass（“current”）这是否回答了您的问题@卡兰辛不是真的。例如，我需要通过点击
open0
向
面板添加一个类，这应该发生在所有
open0
容器中。你的意思是什么：但是如果类已经删除了？如果类“current”是，那么它必须是delete。你可以查找这个=>
$（.panel”）。toggleClass（“current”）这是否回答了您的问题@卡兰辛不是真的。例如，我需要通过单击
open0
将一个类添加到
面板
类中，这应该发生在所有
open0
容器中不太正确。。。如果我点击了
open0
，那么
面板的第二个open0应该有一个额外的类。open0有两个类，因此，两个“面板”都应该有一个额外的类，在您的示例中，这种情况只发生在oneI更新了codepen！这应该有效：0不太正确。。。如果我点击了
open0
，那么
面板的第二个open0应该有一个额外的类。open0有两个类，因此，两个“面板”都应该有一个额外的类，在您的示例中，这种情况只发生在oneI更新了codepen！这应该有效：0
<div class="ind open0" onclick="someFunction(event)">
   <div class="panel">abc</div>
</div>
<div class="ind open0" onclick="someFunction(event)">
   <div class="panel">def</div>
</div>
<div class="ind open1" onclick="someFunction(event)">
   <div class="panel">ghi</div>
</div>
<div class="ind open1" onclick="someFunction(event)">
   <div class="panel">jkl</div>
</div>
<div class="ind open2" onclick="someFunction(event)">
   <div class="panel">mno</div>
</div>
<div class="ind open2" onclick="someFunction(event)">
   <div class="panel">pqr</div>
</div>

.current{
  background-color: red;
  height:100px;
}

function someFunction(event){
 let classList = event.currentTarget.classList.toString();
 let targetClass = classList.toString().slice(classList.indexOf('open'));
  
  let toOpen = document.getElementsByClassName(targetClass);
  for(let el of toOpen){
    let childPanels = el.querySelectorAll('.panel');
    childPanels.forEach(child => {
      child.classList.toggle('current')
    })
   }
}