代码之家 › 专栏 › 技术社区 › fencepencil

javascript foreach循环-特定元素的问题

javascript

fencepencil · 技术社区 · 6 年前

我正试图遍历一些带有属性的元素,并根据单击的元素,我希望 is-active 要添加到特定元素的类。

顶部部分可以工作,单击特定选项卡,但问题在于 tabBody .

现在,它将类添加到所有元素中,我不知道该放在哪里 this 引用正确的 div .

我只要哪一个 tab-body 是主动的,是一样的 tabs-bg 处于活动状态,并具有所有基于单击选项卡的内容。

我有这个密码(我试过 let el = this ,表示已定义):

const tab = document.querySelectorAll('[data-tabs-tab]');
const tabBody = document.querySelectorAll('[data-tabs-body]');

function changeMe() {
  const activeTab = this.hasAttribute('data-tabs-tab');

  [...tab].forEach(el => {
    if (this !== el) {
      el.classList.remove('is-active');
    }
  });
  this.classList.add('is-active');

  [...tabBody].forEach(el => {
    if (el.hasAttribute('data-tabs-body') == activeTab) {
      if (el.classList.contains('tabs-bg')) {
        el.classList.add('is-active');
      }
    } else {
      el.classList.remove('is-active');
    }
  });
}
tab.forEach(el => el.addEventListener('click', changeMe));

<div class="tabs" data-tabs>
  <nav>
    <ul class="tabs__tabs">
      <li data-tabs-tab="one" class="is-active"></li>
      <li data-tabs-tab="two"></li>
      <li data-tabs-tab="three"></li>
    </ul>
  </nav>
  <div class="tabs__content">
    <div data-tabs-body="one" class="tab-body is-active"></div>
    <div data-tabs-body="two" class="tab-body"></div>
    <div data-tabs-body="three" class="tab-body"></div>
  </div>
</div>
<div class="tabs__bg">
  <div data-tabs-body="one" class="tabs-bg is-active"></div>
  <div data-tabs-body="two" class="tabs-bg"></div>
  <div data-tabs-body="three" class="tabs-bg"></div>
</div>

1 回复 | 直到 6 年前

Joseph Marikle 6 年前

.hasAttribute() 只需检查元素上是否存在属性。你应该用 .getAttribute() 而是获取属性的值。

另外,不知道为什么 if (el.classList.contains('tabs-bg')) 布洛克在里面,但我评论了一下,让演示发挥作用。

const tab = document.querySelectorAll('[data-tabs-tab]');
const tabBody = document.querySelectorAll('[data-tabs-body]');

function changeMe() {
  const activeTab = this.getAttribute('data-tabs-tab'); // Change here

  [...tab].forEach(el => {
    if (this !== el) {
      el.classList.remove('is-active');
    }
  });
  this.classList.add('is-active');

  [...tabBody].forEach(el => {
    if (el.getAttribute('data-tabs-body') === activeTab) { // and here
      //if (el.classList.contains('tabs-bg')) {
        el.classList.add('is-active');
      //}
    } else {
      el.classList.remove('is-active');
    }
  });
}
tab.forEach(el => el.addEventListener('click', changeMe));

.is-active {color: red;}

<div class="tabs" data-tabs>
  <nav>
    <ul class="tabs__tabs">
      <li data-tabs-tab="one" class="is-active">Tab 1</li>
      <li data-tabs-tab="two">Tab 2</li>
      <li data-tabs-tab="three">Tab 3</li>
    </ul>
  </nav>
  <div class="tabs__content">
    <div data-tabs-body="one" class="tab-body is-active">Tab Body Content 1</div>
    <div data-tabs-body="two" class="tab-body">Tab Body Content 2</div>
    <div data-tabs-body="three" class="tab-body">Tab Body Content 3</div>
  </div>
</div>
<div class="tabs__bg">
  <div data-tabs-body="one" class="tabs-bg is-active">Tab Body BG 1</div>
  <div data-tabs-body="two" class="tabs-bg">Tab Body BG 2</div>
  <div data-tabs-body="three" class="tabs-bg">Tab Body BG 3</div>
</div>