Question

我试图遍历某些具有属性的元素，并根据我单击的元素，希望将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>

Answer 1

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

JavaScript forEach循环-特定元素的问题

1 个答案: