JavaScript でクラス名ごとに複数の HTML 要素の表示/非表示を切り替える方法

JavaScript を使用してクラス名によって HTML 要素の表示/非表示を切り替える方法

Web ページ上の特定の DIV の表示/非表示を動的に制御したいと考えています。ただし、現在の JavaScript スクリプトは getElementById に依存していますが、DIV は ID ではなくクラス名で識別されるため、これは適切ではありません。

この課題を克服するには、最新のブラウザでサポートされている getElementsByClassName メソッドを利用できます。 。これが包括的な解決策です:

function getElementsByClassName(node, className) {
  if (node.getElementsByClassName) {
    // Native implementation available
    return node.getElementsByClassName(className);
  } else {
    // Use fallback method
    return (function getElementsByClass(searchClass, node) {
      if (!node) node = document;
      var classElements = [],
          els = node.getElementsByTagName("*"),
          pattern = new RegExp("(^|\s)" + searchClass + "(\s|$)");

      for (var i = 0, j = 0; i < els.length; i++) {
        if (pattern.test(els[i].className)) {
          classElements[j] = els[i];
          j++;
        }
      }
      return classElements;
    })(className, node);
  }
}

次に、getElementsByClassName を使用するように切り替えスクリプトを変更できます:

function toggleVisibility(className) {
   var elements = getElementsByClassName(document, className),
       n = elements.length;
   for (var i = 0; i < n; i++) {
     var e = elements[i];

     if (e.style.display == 'block') {
       e.style.display = 'none';
     } else {
       e.style.display = 'block';
     }
  }
}

この更新されたスクリプトを使用すると、複数の DIV の表示/非表示をシームレスに切り替えることができます。同じクラス名。

以上がJavaScript でクラス名ごとに複数の HTML 要素の表示/非表示を切り替える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。