Comment basculer la visibilité de plusieurs éléments HTML par nom de classe avec JavaScript ?-js tutoriel-php.cn

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

Barbara Streisand

Libérer： 2024-11-14 18:06:02

original

1026 Les gens l'ont consulté

How to Toggle the Visibility of Multiple HTML Elements by Class Name with 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);
  }
}

Copier après la connexion

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

Copier après la connexion

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!