Comment basculer la visibilité de plusieurs éléments HTML par nom de classe avec JavaScript ?

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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!