Nasıl Javascript ile Getelementbyıd yerine getElementByClass?

SORU

19 Aralık 2009, CUMARTESİ

Nasıl Javascript ile Getelementbyıd yerine getElementByClass?

Bir web sitesi her DİV sınıfına bağlı olarak bazı DİV elementlerin görünürlüğünü değiştirmek için çalışıyorum. Temel bir Javascript Pasajı onlara geçiş yapmak için kullanıyorum. Sorun senaryoda sadece getElementByClass Javascript desteklenmiyor olarak getelementbyıd kullanır. Ve ne yazık ki sınıf ve kimlik değil DİV adlarını dinamik olarak XSLT stil benim bazı kategori isimleri kullanarak oluşturulan nedeniyle DİVs adını kullanmak zorunda.

Bazı tarayıcılar şimdi getElementByClass destek olduğunu biliyorum, ama İnternet Explorer olmadığı için o yola girmek istemiyorum.

Buldum betikleri kullanarak alın bakın element sınıf (#8 Bu sayfa: http://www.dustindiaz.com/top-ten-javascript/) ama çözemedim nasıl entegre onlarla birlikte benim toggle script.

İşte html kodu. DİVs XML/XSLT ile sayfa yüklendiğinde oluşturulan bu yana kayıp kendileridir. Şimdiden teşekkür ederim çok.

Asıl Soru: Ne kadar aşağıda Geçiş Sınıfına göre Eleman almak yerine KİMLİĞİ ile Eleman almak için komut alabilirim?

<html>

<head>

<!--This is the TOGGLE script-->
<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script>

</head>

<!--the XML/XSLT page contents will be loaded here, with DIVs named by Class separating dozens of li's-->

<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>


</body>
</html>

CEVAP

19 Aralık 2009, CUMARTESİ

getElementsByClassName yöntem artık yerli tarafından desteklenen en son sürüm Firefox, Safari, Chrome, IE ve Opera, sen-ebil yapmak bir işlev yüklenmediğini kontrol etmek için bir yerel uygulama kullanılabilir, aksi takdirde kullanım Dustin Diaz yöntemi:

function getElementsByClassName(node,classname) {
  if (node.getElementsByClassName) { // use native implementation if available
    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);
  }
}

Kullanımı:

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

Bunu Paylaş: