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

How to Toggle Visibility of HTML Elements by Class Name with JavaScript

You want to control the visibility of specific DIVs on a webpage dynamically. However, the current JavaScript script relies on getElementById, which is not suitable as your DIVs are identified by class names rather than IDs.

To overcome this challenge, you can utilize the getElementsByClassName method, which is supported by modern browsers. Here's a comprehensive solution:

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);
  }
}

Now, you can modify your toggle script to use 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';
     }
  }
}

This updated script allows you to seamlessly toggle the visibility of multiple DIVs with the same class name.

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