सीएसएस/जावास्क्रिप्ट एक सीएसएस कक्षा का उपयोग कर डीआईवी दिखाएँ/छुपाएं?

Question

मैंने बटन क्लिक पर टॉगल के रूप में, छिपाने और डीआईवी सामग्री दिखाने के लिए कई स्क्रिप्ट प्राप्त की हैं।

लेकिन वे आईडी का उपयोग कर काम कर रहे हैं।

मैं वही काम करना चाहता हूं लेकिन मैं एक आईडी के बजाय कक्षा का उपयोग करना चाहता हूं ताकि अगर मैं 20 डीआईवी टॉगल करना चाहता हूं ... छुपाएं/दिखाएं मुझे अतिरिक्त कोड जोड़ने की ज़रूरत नहीं है।

<script language="javascript"> 
function toggle() { 
    var ele = document.getElementById("toggleText"); 
    var text = document.getElementById("displayText"); 
    if(ele.style.display == "block") { 
      ele.style.display = "none"; 
     text.innerHTML = "show"; 
    } 
    else { 
     ele.style.display = "block"; 
     text.innerHTML = "hide"; 
    } 
} 
</script> 

<a id="displayText" href="javascript:toggle();">show</a> <== click Here 
<div id="toggleText" style="display: none"><h1>peek-a-boo</h1></div> 

किसी को भी इस के साथ मदद कर सकते हैं तो कृपया:

यहाँ कुछ कोड है?

धन्यवाद

Answer 1

क्या jquery एक विकल्प है? उम्मीद है कि ऐसा है, क्योंकि यह करता है कि आप क्या चाहते हैं:

http://api.jquery.com/toggle/

$(".class").toggle(); 
or 
$(".class").show(); $(".class").hide(); 

Answer 2

नहीं यह सिर्फ

$('.classname').hide(); 

या समूह सभी तत्वों को आप एक कंटेनर div भीतर छिपाने के लिए, और फिर उस div छिपाने चाहते हैं होगा।

Answer 3

jQuery का उपयोग करना:

$(".classname").hide(); 

जहां classname क्लास का नाम है।

Answer 4

jQuery चयनकर्ता का उपयोग करके आप द्वारा एक आईडी पा सकते हैं: कि कक्षाओं का चयन करने के बदलने

$("#id") 

तुच्छ है:

$(".className") 

jQuery का उपयोग किए बिना यह थोड़ा और गैर-तुच्छ है, लेकिन आप वें देख सकते हैं अतः कुछ मदद के लिए सवाल यह है:

How to getElementByClass instead of GetElementById with Javascript?

Answer 5

आप बस $(".className").hide();

इस्तेमाल कर सकते हैं $(".somthing")$("#somthing") के रूप में भी ऐसा ही है, सिवाय इसके कि यह एक आईडी के बजाय एक वर्ग के लिए है।

Answer 6

अधिकांश jQuery उत्तरों को बहुत आसान होना चाहिए, लेकिन जैसा कि आपका उदाहरण नियमित जेएस में है, यहां जेएस में ऐसा करने का तरीका बताया गया है।

संभावित नकारात्मकता: ब्राउज़र जो getElementsByTagName का समर्थन नहीं करते हैं। मैंने आईई 7 का परीक्षण किया और यह काम करता है, लेकिन मुझे कम के बारे में निश्चित नहीं है।

var divs = document.getElementsByTagName('div'); 

var toggle = function() {  
    for (var i = 0, l = divs.length; i < l; i++) { 
     if (divs[i].getAttribute('class') == 'problem') 
      if (divs[i].style.display == 'none') divs[i].style.display = ''; 
      else divs[i].style.display = 'none'; 
    } 
} 

document.getElementById('Toggle').onclick = toggle; 

इसे बाहर का प्रयास करें: http://jsfiddle.net/robert/PkHYf/

Answer 7

के रूप में अन्य लोगों ने कहा कई बार, यह एक jQuery चयनकर्ता और .hide विधि का उपयोग कर jQuery में आसान है। हालांकि, चूंकि आप एक सामान्य अर्थ में पूछ रहे हैं और यह एक अच्छा विचार है कि बिना ढांचे के इसे कैसे किया जाए, यह एक पूर्ण उत्तर नहीं है।

1. JQuery विधि:

   यहाँ अपने विकल्प हैं। बस jQuery चयनकर्ताओं और .hide() विधि का उपयोग करें।

   $ ("className।") को छिपाने()

2. वेनिला जे एस:। गतिशील सीएसएस। एक दृष्टिकोण गतिशील दस्तावेज़ के शीर्ष स्टाइलशीट संलग्न करने के लिए है - आप कर सकते हैं Alter CSS class attributes with javascript?

3. वेनिला जे एस: सीधे सीएसएस संशोधित करें:

   var ss = document.styleSheets; 
       for (var i=0; i<ss.length; i++) { 
        var rules = ss[i].cssRules || ss[i].rules; 
   
        for (var j=0; j<rules.length; j++) { 
         if (rules[j].selectorText === ".classname") { 
          rules[j].style.visibility = "none"; 
         } 
        } 
       }