Javascript getAttribute 未计算 if 语句中的字符串值

Question

我正在尝试循环浏览页面上的选项卡并找出选择了哪个选项卡（我在 oracle APEX 上使用选项卡容器），并且活动选项卡的属性 aria-selected 为 true，所以我正在寻找它。

我尝试过以下代码：

for (var i=0; i < document.getElementsByClassName('t-Tabs-link').length; i++) {
    if (console.log(document.getElementsByClassName('t-Tabs-link')[i].getAttribute('aria-selected')) === 'true') {
        console.log('here');
    }
    else {
        console.log('not here');
    }
}

但是，正如您在下图中看到的那样，所有内容都被评估为不正确，即使是属性为 true 的选项卡也是如此。如果有人能告诉我我做错了什么，我将非常感激。

Answer 1

使用

forEach

循环代替

for

循环，其目的更加明确和直接

document.querySelectorAll('.t-Tabs-link').forEach(function(tab) {
    if (tab.getAttribute('aria-selected') === 'true') {
        console.log(tab.innerText, 'is selected');
    } else { console.log(tab.innerText, 'is not selected'); }
});

      <a class="t-Tabs-link" aria-selected="false">Tab 1</a>
      <a class="t-Tabs-link" aria-selected="false">Tab 2</a>
      <a class="t-Tabs-link" aria-selected="true">Tab 3</a>
   

Answer 2

如果将链接存储在变量中，则可以更轻松地看到您在做什么。你的 for 循环中有几个错别字：

const tabsLinks = document.getElementsByClassName('t-Tabs-link');

for (var i = 0; i < tabsLinks.length; i++) 
{
  if (tabsLinks[i].getAttribute('aria-selected') === 'true') 
  {
    console.log('here');
  } 
  else 
  {
    console.log('not here');
  }
}

<a class="t-Tabs-link" aria-selected="false">Tab 1</a>
<a class="t-Tabs-link" aria-selected="false">Tab 2</a>
<a class="t-Tabs-link" aria-selected="true">Tab 3</a>