时间戳

首页 > 解决方案 > 添加额外的类点击

javascript - 添加额外的类点击

问题描述

例如，我得到了这个类"ind open1"，我想为panel具有类“”的那些块添加一个额外的类

例如，我单击 ind open0并panel添加类panel current，但如果类已删除

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

如果我点击ind open0类，我想要这个结果

 <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>

如果我点击ind open1类

<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>

标签： javascriptcss

解决方案

看看这个代码笔：

https://codepen.io/CrowlsYung/pen/f4d8505f7b6e9cdf98f29118ba900f94?editors=1111

HTML

<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>

CSS

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

JS

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')
    })
   }
}

推荐阅读