Bagaimana untuk Memilih Elemen HTML mengikut Nama Kelas dalam JavaScript?

Bagaimana untuk mendapatkanElementByClass dengan JavaScript?

Soalan:

Anda bertujuan untuk menogol keterlihatan elemen DIV berdasarkan kelas mereka menggunakan coretan JavaScript. Walau bagaimanapun, skrip semasa bergantung pada getElementById, yang tidak sesuai kerana nama DIV dijana secara dinamik menggunakan XSLT.

Jawapan:

Kaedah getElementsByClassName:

Pelayar moden menyokong kaedah getElementsByClassName secara asli. Anda boleh menyemak ketersediaannya dan menggunakannya jika disokong.

Kaedah Dustin Diaz (Untuk Pelayar Lama):

Untuk pelayar lama, gunakan kaedah Dustin Diaz:

<code class="javascript">function getElementsByClassName(node, classname) {
  if (node.getElementsByClassName) { // Native implementation exists
    return node.getElementsByClassName(classname);
  } else {
    return (function getElementsByClass(searchClass, node) {
        if ( node == null )
          node = document;
        var classElements = [],
            els = node.getElementsByTagName("*"),
            elsLen = els.length,
            pattern = new RegExp("(^|\s)"+searchClass+"(\s|$)"), i, j;

        for (i = 0, j = 0; i < elsLen; i++) {
          if ( pattern.test(els[i].className) ) {
              classElements[j] = els[i];
              j++;
          }
        }
        return classElements;
    })(classname, node);
  }
}

Skrip Togol Dikemas Kini:

Gunakan kaedah getElementsByClassName atau sandaran Dustin Diaz dalam skrip togol anda:

<code class="javascript">function toggle_visibility(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';
     }
  }
}

Penggunaan :

Dalam HTML anda, ubah suai atribut onclick pautan togol anda untuk merujuk fungsi toggle_visibility baharu:

<code class="html"><a href="#" onclick="toggle_visibility('class1');">Click here to toggle visibility of class 1 objects</a>
<a href="#" onclick="toggle_visibility('class2');">Click here to toggle visibility of class 2 objects</a></code>

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