Bagaimana untuk Togol Keterlihatan Berbilang Elemen HTML mengikut Nama Kelas dengan JavaScript?

Cara Togol Keterlihatan Elemen HTML mengikut Nama Kelas dengan JavaScript

Anda mahu mengawal keterlihatan DIV tertentu pada halaman web secara dinamik. Walau bagaimanapun, skrip JavaScript semasa bergantung pada getElementById, yang tidak sesuai kerana DIV anda dikenal pasti melalui nama kelas dan bukannya ID.

Untuk mengatasi cabaran ini, anda boleh menggunakan kaedah getElementsByClassName, yang disokong oleh penyemak imbas moden . Berikut ialah penyelesaian yang komprehensif:

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

Kini, anda boleh mengubah suai skrip togol anda untuk menggunakan 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';
     }
  }
}

Skrip yang dikemas kini ini membolehkan anda menogol keterlihatan berbilang DIV dengan lancar dengan nama kelas yang sama.

Atas ialah kandungan terperinci Bagaimana untuk Togol Keterlihatan Berbilang Elemen HTML mengikut Nama Kelas dengan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!