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

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')) block 在那里，但我将其注释掉以使演示正常工作。

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>