Rumah > hujung hadapan web > tutorial js > Bagaimana untuk Togol Keterlihatan Berbilang Elemen HTML mengikut Nama Kelas dengan JavaScript?

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

Barbara Streisand
Lepaskan: 2024-11-14 18:06:02
asal
1028 orang telah melayarinya

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

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';
     }
  }
}
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan