स्लाइड एक बार में दो बार निष्पादित करने के लिए टॉगल

Question

मैं इस बिंदु पर एक लाइव उदाहरण नहीं दिखा सकता, लेकिन मुझे नहीं लगता कि स्लाइड टॉगल को दो बार कैसे बुलाया जा रहा है। इसे एक लिंक के क्लिक पर बुलाया जाता है।

यहाँ:

// initialize the jquery code 
$(function(){ 
    $('div.slideToggle a').click(function(){ 
    $(this).parent().siblings('div.remaining-comments').slideToggle('slow',function(){ //'this' becomes the remaining-comments. 
    var hidden = $(this).siblings('div.slideToggle').find('input').val(); 
    if($(this).siblings('div.slideToggle').find('a').html().substr(0,4) == 'Show'){ 
    $(this).siblings('div.slideToggle').find('a').html('Hide comments'); 
    } 
    else { 
    $(this).siblings('div.slideToggle').find('a').html(hidden); 
    } 
    }); 
    }); 
}); 

यह प्रदर्शित करने और एक ब्लॉग पृष्ठ पर अतिरिक्त टिप्पणियों को छुपाने के लिए है। हालांकि, यह एक क्लिक में प्रदर्शित हो रहा है और फिर छुपा रहा है। मैंने 'if' और 'else' दोनों में एक चेतावनी डाली है और दोनों दिखाई देते हैं, तो इसे दो बार कैसे बुलाया जाता है?

स्पष्ट रूप से जब लिंक में 'शो' टेक्स्ट होता है तो यह छुपा div प्रकट करता है, और जब फिर से क्लिक किया जाता है तो उसे 'शो' नहीं मिलेगा और इसलिए div को छुपाएगा। मजाकिया बात यह है कि यह पूरी तरह से काम कर रहा था। यह कंपनी इंट्रानेट पर है इसलिए मुझे लगता है कि शायद कुछ और इसे प्रभावित कर सकता है, लेकिन मैं वास्तव में नहीं देखता कि कैसे।

Answer 1

यह संभव है कि आपके दस्तावेज़ को तैयार करने के लिए एक से अधिक बार कहा जाता है, जब पृष्ठ पुन: प्रारंभ होता है, करने के लिए सबसे अच्छी बात यह है कि क्लिक ईवेंट को एक नया बाध्य करने से पहले अनइंड करें।

इस तरह से आप क्लिक करें घटना 1 तत्व

पर दो बार बाध्य इस कोशिश होने से बचने:

$('div.slideToggle a').unbind('click').click(function(){ 
    // your code here 
}); 

अद्यतन:

इस ऊपर स्थिति के साथ समस्या यह आप के लिए है कि है इसे फिर से क्लिक फ़ंक्शन को बाध्य करने के बाद जोड़े गए प्रत्येक अतिरिक्त तत्व को दोबारा बांधें।

आप डोम में रहने वाले मूल आइटम पर 1 क्लिक हैंडलर बाध्य करके इस समस्या को ठीक कर सकते हैं। इसे उप-चयनकर्ता को तर्क के रूप में देना।

इसके परिणामस्वरूप प्रत्येक तत्व के लिए 1 के बजाय केवल 1 क्लिक हैंडलर जोड़ा जा रहा है। तो आपको प्रदर्शन, कोड निष्पादन समय, और आपके द्वारा लिखे गए जावास्क्रिप्ट की मात्रा पर जीतना चाहिए।

उदाहरण:

माना कि आप सूची जहां dinamically नए तत्व

<ul id="ContactList"> 
    <li>John Doe <a href="#">Like</a></li> 
    <li>Jane Doe <a href="#">Like</a></li> 
    <li>Josh Doe <a href="#">Like</a></li> 
    <li>Jeff Doe <a href="#">Like</a></li> 
</ul> 

जोड़ सकते हैं और आप एंकर टैग पर कुछ कार्यक्षमता के लिए बाध्य है, जब यह

$(function(){ 

    $('#ContactList').on('click', 'li a', function(e){ 
     // do your thing here... 
     var el = $(e.currentTarget); 
     el.addClass('iLikeYou'); 
    }); 

}); 

क्लिक किया जाता है अब है कोई फर्क नहीं पड़ता कि आप बाद में कितनी चीजें जोड़ते हैं, यह वैसे भी काम करेगा। क्योंकि यह ul#ContactList के भीतर कहीं भी क्लिक स्वीकार करता है और केवल क्लिकबैक निष्पादित करेगा जब क्लिक किए गए तत्व चयनकर्ता li a से मेल खाता है।

जबकि$('#ContactList li a')पहले सभी तत्व प्राप्त करेंगे और फिर सभी चयनित वस्तुओं पर क्लिक को बाध्य करेंगे। बाद में जोड़े गए आइटमों में क्लिक ईवेंट नहीं है और उन्हें पहले उन्हें बाध्य करने की आवश्यकता होगी।

Answer 2

उनमें स्क्रिप्ट ब्लॉक वाले तत्वों को स्थानांतरित या लपेटने के लिए देखें। इससे कोड को दो बार निष्पादित किया जा सकता है। unbind एक कामकाज है लेकिन अपने जेएस को पृष्ठ के सिर या नीचे ले जाने के लिए बेहतर है।

Answer 3

मुझे बहुत देर हो चुकी है, लेकिन slideToggle() फ़ंक्शन complete फ़ंक्शन को टॉगलिंग करने वाले प्रत्येक तत्व के लिए कॉल करेगा।

शायद एक से अधिक $(this).parent().siblings('div.remaining-comments') है।

Answer 4

बस e.stopPropagation() का उपयोग करना; शुरुआत में (और फ़ंक्शन (ई) {) ने इसे मेरे लिए तय किया।

Answer 5

प्रस्तावना

जवाब अपने प्रश्नों के jQuery के बारे में काफी अजीब कुछ बताते हैं। जब मैंने divs को छिपाने/स्लाइड करने और किसी अन्य को एक jquery/Ajax नेविगेशन साइट में दिखाने/स्लाइड करने की कोशिश की, तो मैं इस समस्या में भाग गया, यह नहीं जानता कि कौन से div पहले से दिखाई दे रहे थे।

संभावित जवाब

एक jQuery एक ही कॉल में एक से अधिक तत्व होने पर, समारोह एक बार से अधिक मार डाला जाता है।

उदाहरण

$("#div_one, #div_two").hide("slow", function() { 
    $("#div_two").show("slow"); 
}); 

-> #div_two, दिखाई देगा गायब हो जाते हैं, और फिर, फिर से दिखाई देते हैं क्योंकि श्रृंखलित समारोह दो बार ट्रिगर किया जाएगा।

additionnal जानकारी

यही बात कई तत्वों के साथ एक वर्ग के लिए एक कॉल के साथ हुआ।

समाधान

मेरे मामले में, मैं बस कुछ अलग करना का फैसला किया। पहले divs केवल गायब हो जाते हैं (कोई स्लाइड प्रभाव नहीं), और नया एक स्लाइड प्रभाव हो सकता है। इस तरह, मुझे नए div को नए div को ट्रिगर करने से पहले स्लाइड करने के लिए पहले divs की प्रतीक्षा करने की आवश्यकता नहीं है, इसलिए मुझे दूसरे आदेश को एक जंजीर फ़ंक्शन में encapsulate करने की आवश्यकता नहीं है।

इस उदाहरण में, सूचना के केवल एक बार को गति प्रदान:

$("#div_one, #div_two").hide(); 
$("#div_two").show("slow"); 
}); 

यह उपयोगकर्ता के अनुभव को बदलता है, लेकिन यह काम करता है ...