JavaScript ile GetElementById yerine getElementByClass nasıl yapılır?

Question 1

Her DIV'nin sınıfına bağlı olarak bir web sitesindeki belirli DIV öğelerinin görünürlüğünü değiştirmeye çalışıyorum. Geçiş yapmak için temel bir JavaScript pasajı kullanıyorum. Sorun script sadece kullanmasıdır getElementByIdolarak, getElementByClassJavaScript desteklenmez. Ve maalesef DIV'leri adlandırmak için id değil class kullanmam gerekiyor çünkü DIV adları XSLT stil sayfam tarafından belirli kategori adları kullanılarak dinamik olarak üretiliyor.

Bazı tarayıcıların artık desteklediğini biliyorum getElementByClass, ancak Internet Explorer olmadığı için bu rotaya gitmek istemiyorum.

Öğeleri sınıfa göre almak için işlevleri kullanan komut dosyaları buldum (bu sayfadaki # 8 gibi: http://www.dustindiaz.com/top-ten-javascript/ ), ancak bunları nasıl entegre edeceğimi çözemiyorum geçiş komut dosyamla.

İşte HTML kodu. XML / XSLT ile sayfa yüklenirken oluşturuldukları için DIV'lerin kendileri eksiktir.

Ana Soru: Öğeyi kimliğe göre almak yerine Sınıfa göre Öğeyi almak için aşağıdaki Toggle komut dosyasını nasıl edinebilirim?

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

Question 2

Modern tarayıcıların document.getElementsByClassName. Caniuse'de hangi satıcıların bu işlevi sağladığının tam dökümünü görebilirsiniz . Desteği eski tarayıcılara genişletmek istiyorsanız, jQuery'de veya bir polyfill'de bulunan gibi bir seçici motor düşünebilirsiniz.

Eski Cevap

Aşağıdakileri sağlayacak jQuery'ye giriş yapmak isteyeceksiniz :

$(".classname").hide(); // hides everything with class 'classname'

Google, barındırılan bir jQuery kaynak dosyası sunar, böylece ona başvurabilir ve birkaç dakika içinde çalışmaya başlayabilirsiniz. Sayfanıza aşağıdakileri ekleyin:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
  $(function(){
    $(".classname").hide();
  });
</script>

Question 3

getElementsByClassNameYerel bir uygulama varsa yöntem artık doğal Firefox, Safari, Chrome, IE ve Opera en son sürümleri tarafından desteklenir, aksi takdirde Dustin Diaz yöntemini kullanın bir işlev kontrol etmek yapabilir:

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

Question 4

document.getElementsByClassName('CLASSNAME')[0].style.display = 'none';

Aslında getElementsByClassName kullanarak birden çok sınıf dizisi döndürür. Çünkü aynı sınıf adı, aynı HTML sayfası içinde birden fazla örnekte kullanılabilir. İhtiyacımız olan sınıfı hedeflemek için dizi öğesi kimliği kullanıyoruz, benim durumumda bu, verilen sınıf adının ilk örneğidir. Bu yüzden [0] kullandım

Question 5

Javascript'teki sınıfa erişmek için kullanın.

<script type="text/javascript">
var var_name = document.getElementsByClassName("class_name")[0];
</script>

Question 6

ekleyerek CMS cevap , bu daha genel bir yaklaşımdır toggle_visibilitysadece kendimi kullandım:

function toggle_visibility(className,display) {
   var elements = getElementsByClassName(document, className),
       n = elements.length;
   for (var i = 0; i < n; i++) {
     var e = elements[i];

     if(display.length > 0) {
       e.style.display = display;
     } else {
       if(e.style.display == 'block') {
         e.style.display = 'none';
       } else {
         e.style.display = 'block';
       }
     }
  }
}

Question 7

Çözümüm:

Önce bir kimliğe sahip "<style>" etiketleri oluşturun.

<style id="YourID">
    .YourClass {background-color:red}
</style>

Ardından JavaScript'te şöyle bir işlev oluşturuyorum:

document.getElementById('YourID').innerHTML = '.YourClass {background-color:blue}'

Benim için bir cazibe gibi çalıştı.

Question 8

Sınıf bildirimine kimlikler ekleyin

.aclass, #hashone, #hashtwo{ ...codes... }
document.getElementById( "hashone" ).style.visibility = "hidden";