DOM里面的进度都一样Class

Question

我想在 DIV 元素的 class 中关闭所有标记为 readerPanelsRight 的 DIV 的显示，但出现此错误。

该页面包含 readerPanelsRight 但我仍然收到“未定义”错误。有什么问题？

function updateStyleWithClass(elmId, value) {
   var elem = document.getElementsByClassName(elmId);
   if (typeof elem !== 'undefined' && elem !== null) {
       elem[0].style.display = value;
     }
 }

function tabShowing(tabID) {
    var classMatcher = /(?:^|\s)readerPanelsRight(?:\s|$)/;
    var els = document.getElementsByTagName('*');
    for (var i = els.length; i--;) {
        if (classMatcher.test(els[i].className)) {
            updateStyleWithClass(els[i], 'none');
        }
    }
    // Element ID is showing code here..
}

HTML:

<a href="#" onclick="tabShowing('elementID_1')">button_1</a>
<a href="#" onclick="tabShowing('elementID_2')">button_2</a>
<a href="#" onclick="tabShowing('elementID_3')">button_3</a>

<div class="readerPanelsRight" id="elementID_1"></div>
<div class="readerPanelsRight" id="elementID_2"></div>
<div class="readerPanelsRight" id="elementID_3"></div>

控制台：

Uncaught TypeError: elem[0] is undefined

谢谢。

Answer 1

你把事情搞得比实际情况要复杂得多。使用 getElementsByClassName() 让元素循环，而不是 getElementsByTagId()。而在updateStyleWithClass()中，参数就是元素，你不需要调用另一个get函数。

function updateStyleWithClass(elem, value) {
  elem.style.display = value;
}

function tabShowing(tabID) {
  var els = document.getElementsByClassName('readerPanelsRight');
  for (var i = els.length; i--;) {
    updateStyleWithClass(els[i], 'none');
  }
  let selected_tab = document.getElementById(tabID);
  if (selected_tab) {
    updateStyleWithClass(selected_tab, "block");
  }
}

DOM里面的进度都一样Class

Progress all the same Class found inside the DOM

javascript

getelementsbytagname