2012-03-14 18 views
6

टॉगल करें मैंने देखा है कि विभिन्न उदाहरण जो मैं ढूंढ रहा हूं उसके करीब आते हैं, लेकिन इनमें से कोई भी इसका वर्णन नहीं करता है कि मैं इसे बिल्कुल कैसे चाहता हूं। मैं jQuery के लिए एक नौसिखिया हूँ, तो स्पष्टीकरण स्वागत है।आंतरिक HTML

मैं innerHTML- से + पर टॉगल करने के लिए देख रहा हूं। किसी को भी कुशलता से ऐसा करने का तरीका पता है?

jQuery/जावास्क्रिप्ट

$(document).ready(function() { 
      $(".A1").click(function() { 
       $(".P1").toggle("slow"); 
       $(".A1").html("+"); 
      }); 
     }); 

एचटीएमएल

<div class="A1">-</div> 
<h2 class="H1">Stuff</h2> 
<div class="P1"> 
Stuffy, Stuffy, Stuffed, Stuffen', Stuffing, Good Luck Stuff 
</div> 

किसी HTML तत्व में मदद करेगा के अंदर पाठ स्विचन से संबंधित धन्यवाद, कुछ भी। =)

+1

'अगर ($ ('। A1') पाठ() == '-') $ ('ए 1')। पाठ ('+') और $ ('ए 1')। पाठ ('-') 'या? – powerbuoy

+0

@ powerbuoy-'var e = $ ('ए 1') [0]; e.innerHTML = e.innerHTML == '+'? '-': '+'; ' – RobG

+0

हां, यह बेहतर है। – powerbuoy

उत्तर

8

के बारे में कैसे एक वर्ग क्या आप जानते हैं विस्तार/स्थिति ध्वस्त हो गई देंगे जोड़ने: यहाँ है कि संशोधन के साथ कोड है?

एचटीएमएल

<div class="A1 expanded">-</div> 
<h2 class="H1">Stuff</h2> 
<div class="P1"> 
Stuffy, Stuffy, Stuffed, Stuffen', Stuffing, Good Luck Stuff 
</div> 

जावास्क्रिप्ट:

$(document).ready(function() { 
    $(".A1").click(function() { 
     var $this = $(this); 
     $(".P1").toggle("slow") 

     $this.toggleClass("expanded"); 

     if ($this.hasClass("expanded")) { 
      $this.html("-"); 
     } else { 
      $this.html("+"); 
     } 
    }); 
}); 

उदाहरण:http://jsfiddle.net/sGxx4/

4
$(document).ready(function() { 
    $(".A1").click(function() { 
     $(".P1").toggle("slow"); 
     $(".A1").html(($(".A1").html() === "+" ? $(".A1").html("-") : $(".A1").html("+"))); 
    }); 
}); 

स्पष्टीकरण का एक बिट: मैं तृतीयक ऑपरेटर के उत्पाद के साथ $("#A1").html() सेट कर रहा हूं, #A1 के पाठ के वर्तमान मूल्य के लिए जाँच करने के लिए इसे का उपयोग। यदि यह + है, तो मैंने तत्व का टेक्स्ट - पर सेट किया है, अन्यथा, मैं इसे + पर सेट करता हूं।

हालांकि, आपने कहा "कुशलतापूर्वक।" इस अंत में, यह ध्यान रखना महत्वपूर्ण है कि यदि आप एक ही फ़ंक्शन में दो बार या अधिक चयनकर्ता का उपयोग करने जा रहे हैं, तो आपको उस jQuery ऑब्जेक्ट को स्टोर करना चाहिए जो आपके द्वारा एक चर में चयनकर्ता से होता है, इसलिए आपको हर बार चयनकर्ता फिर से चलाएं।

$(document).ready(function() { 
    $(".A1").click(function() { 
     var $A1 = $(".A1"); 
     $(".P1").toggle("slow"); 
     $A1.html(($A1.html() === "+" ? $A1.html("-") : $A1.html("+"))); 
    }); 
}); 
2

सामग्री टॉगल करने के लिए कोई तरीका नहीं है। आप जांच सकते हैं कि $ ('। P1') दिखाई दे रहा है, फिर उसके अनुसार +/- div बदल रहा है।

कुछ की तरह:

$(document).ready(function() { 
    $(".A1").click(function() { 
    $(".P1").toggle("slow", function(){ 
     if($(this).is(':visible')) 
      $(".A1").html("-") 
     else 
      $(".A1").html("+") 
    }); 
    }); 
}); 

कॉलबैक फ़ंक्शन (.toggle() विधि का दूसरा तर्क) का उपयोग करना जाँच की गारंटी देगा कि आप जाँच कर रहे हैं के बाद एनीमेशन पूरा हो गया है क्या करना है।

JsFiddle: http://jsfiddle.net/cy8uX/

0

अधिक छोटा संस्करण

$(document).ready(function() { 
    $(".A1").click(function() { 
     var $self = $(this); 
     $(".P1").toggle("slow", function () { 
      $self.html($self.html() == "-" ? "+" : "-"); 
     }); 
    }) 
}); 
0

यहाँ एक तरह से एक माता पिता और सीएसएस नियमों पर वर्ग के नाम का उपयोग करता है और HTML सामग्री को बदलने के लिए नहीं है और एक कंटेनर बंद काम करता है कि है और

एचटीएमएल:

ताकि आप कक्षाएं कोड के केवल इस एक टुकड़ा के साथ एक ही पेज में इनमें से कई लोगों को हो सकता था 10

सीएसएस:

.expanded .plus {display:none;} 
.collapsed .minus {display: none;} 

जावास्क्रिप्ट:

$(document).ready(function() { 
    $(".A1").click(function() { 
     $(this).closest(".container") 
      .toggleClass("expanded collapsed") 
      .find(".P1").slideToggle("slow"); 
    }); 
}); 

कार्य डेमो:। http://jsfiddle.net/jfriend00/MSV4U/

संबंधित मुद्दे