Javascript getAttribute 未计算为 if 语句中的字符串值-解网

问：

我正在尝试遍历页面上的选项卡并找出选择了哪一个（我在oracle APEX上使用Tab容器），并且活动选项卡的属性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，即使是具有 true 属性的选项卡也是如此。如果有人能告诉我我做错了什么，我将非常感激。

控制台输出

javascript 对象

评论

0赞 pilchard 11/5/2023

您可以直接查询 aria 值。请参见：通过 aria 标签获取 HTML 元素

4赞 Bergi 11/5/2023

console.log总是返回，所以比较是没有意义的。删除日志记录，代码将起作用。undefinedconsole.log(…) === 'true'

0赞 Pointy 11/5/2023

也不要那样一遍又一遍地打电话。.getElementsByClassName()

0赞 motion_picture_999 11/6/2023

@Bergi - 感谢您解释控制台.log问题

答：

0赞 Afzal K. 11/5/2023 #1

使用循环而不是循环，其目的更明确、更直接forEachfor

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>

评论

0赞 motion_picture_999 11/6/2023

谢谢，我很欣赏替代方法，我对 javascript 很陌生。

0赞 Bergi 11/7/2023

最好使用循环而不是方法for … of.forEach()

0赞 symlink 11/5/2023 #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>

评论

0赞 motion_picture_999 11/6/2023

谢谢！我不能投票，因为这是一个新帐户，但这有效

上一个：我有一个古怪的纸牌游戏，它让我发疯编辑

下一个：在 Javascript 中将数组分成多个对象