जावास्क्रिप्ट के साथ GetElementById के बजाय GetElementByClass कैसे प्राप्त करें?

Question 1

मैं प्रत्येक DIV के वर्ग के आधार पर एक वेबसाइट पर कुछ DIV तत्वों की दृश्यता को टॉगल करने की कोशिश कर रहा हूं। मैं उन्हें टॉगल करने के लिए एक मूल जावास्क्रिप्ट स्निपेट का उपयोग कर रहा हूं। समस्या यह है कि स्क्रिप्ट केवल उपयोग करती है getElementById, जैसा getElementByClassकि जावास्क्रिप्ट में समर्थित नहीं है। और दुर्भाग्यवश मुझे DIV का नाम लेने के लिए क्लास और आईडी का उपयोग नहीं करना पड़ता है क्योंकि DIV नाम गतिशील रूप से मेरे XSLT स्टाइलशीट द्वारा कुछ श्रेणी नामों का उपयोग करके उत्पन्न किया जाता है।

मुझे पता है कि कुछ ब्राउज़र अब समर्थन करते हैं getElementByClass, लेकिन चूंकि इंटरनेट एक्सप्लोरर मैं उस मार्ग पर नहीं जाना चाहता।

मुझे कक्षा द्वारा तत्वों को प्राप्त करने के लिए कार्यों का उपयोग करके स्क्रिप्ट मिली है (जैसे कि इस पृष्ठ पर # 8: http://www.dustindiaz.com/top-ten-javascript/ ), लेकिन मैं यह पता नहीं लगा सकता कि उन्हें कैसे एकीकृत किया जाए मेरे टॉगल स्क्रिप्ट के साथ।

यहाँ HTML कोड है। XML / XSLT के साथ पेज लोड होने के बाद से DIV खुद गायब हैं।

मुख्य प्रश्न: मुझे आईडी द्वारा तत्व प्राप्त करने के बजाय कक्षा द्वारा तत्व प्राप्त करने के लिए नीचे टॉगल स्क्रिप्ट कैसे मिलेगी?

<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

आधुनिक ब्राउज़रों के लिए समर्थन है document.getElementsByClassName। आप पूर्ण विराम देख सकते हैं कि कौन से विक्रेता कैनुएज़ में यह कार्यक्षमता प्रदान करते हैं । यदि आप पुराने ब्राउज़रों में समर्थन का विस्तार करना चाहते हैं, तो आप चयनकर्ता इंजन पर विचार करना चाह सकते हैं जैसे कि jQuery या पॉलीफ़िल।

पुराना उत्तर

आप jQuery में जांचना चाहते हैं , जो निम्नलिखित की अनुमति देगा:

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

Google एक होस्ट किया गया jQuery स्रोत-फ़ाइल प्रदान करता है, जिससे आप इसे संदर्भित कर सकते हैं और क्षणों में ऊपर-नीचे हो सकते हैं। अपने पृष्ठ में निम्नलिखित शामिल करें:

<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

getElementsByClassNameविधि अब देशी रूप फायरफॉक्स, सफारी, क्रोम, IE और ओपेरा के नवीनतम संस्करणों के द्वारा समर्थित है, तो आप एक समारोह की जाँच करने के कर सकता है, तो एक देशी कार्यान्वयन उपलब्ध है, अन्यथा डस्टिन डियाज़ विधि का उपयोग करें:

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

उपयोग:

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

GetElementsByClassName का उपयोग करके Acyually, यह कई वर्गों की एक सरणी देता है। क्योंकि एक ही HTML नाम से एक ही वर्ग का नाम एक से अधिक उदाहरणों में उपयोग किया जा सकता है। हम अपने मामले में जिस वर्ग की ज़रूरत है, उसे लक्षित करने के लिए हम ऐरे एलिमेंट आईडी का उपयोग करते हैं, यह दिए गए वर्ग के नाम का पहला उदाहरण है। मैंने जो प्रयोग किया है [0]

Question 5

इसे जावास्क्रिप्ट में एक्सेस क्लास में उपयोग करें।

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

Question 6

CMS के उत्तर में जोड़ना , यह toggle_visibilityमेरे द्वारा उपयोग किए गए स्वयं के लिए अधिक सामान्य दृष्टिकोण है :

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

मेरा समाधान:

पहले एक आईडी के साथ "<style>" टैग बनाएं।

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

फिर, मैं इस तरह जावास्क्रिप्ट में एक फ़ंक्शन बनाता हूं:

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

मेरे लिए एक जादू की तरह काम किया।

Question 8

कक्षा घोषणा में आईडी संलग्न करें

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