jQuery शो/छुपा नहीं काम

Question

यह वास्तव में अजीब है, और मैं इसके खिलाफ अपने सिर को कई घंटों तक मार रहा हूं और इसे समझ नहीं सकता।

मैं एक फॉर्म पर कुछ तत्व छिपाने के लिए jQuery का उपयोग कर रहा हूं (कक्षा .read-only के साथ टैग की गई) और अन्य तत्व दिखाएं (कक्षा .edit-version के साथ टैग की गईं)।

मूल रूप से, उपयोगकर्ता एक संपादन लिंक पर क्लिक करता है, और उस लिंक के माता-पिता के भीतर, केवल-पढ़ने वाले आइटम छुपाए जाते हैं और संपादन आइटम (इनपुट) प्रदर्शित होते हैं। यह ठीक काम करता है।

समस्या सर्वर से प्रतिक्रिया में होती है, जो विपरीत मामले को पार कर रही है। यह उस div को पाता है जो फ़ॉर्म होस्ट कर रहा है, और यह संपादन संस्करणों को छुपाता है और केवल पढ़ने को प्रदर्शित करता है। इसके अलावा यह नहीं है। कोड यह रहा:

host = $('#employee-card-49'); 
$('.edit-version', host).hide(); 
$('.read-only', host).show(); 

मैं प्रमाणित कर चुके हैं कि वह सही div (#employee-card-49) पाया जाता है मिला है, और सही आइटम है, और पृष्ठ पर दिखाई गई आईडी के साथ ही आइटम है।

मैंने सत्यापित किया है कि $('.edit-version', host).length सही है। यह 3 लौटाता है, यह दर्शाता है कि यह तीन तत्वों को ढूंढ रहा है।

मैंने सत्यापित किया है कि $('.edit-version', host) से प्रत्येक लौटाई गई वस्तु सही है। मैं उनके गुण प्राप्त कर सकते हैं।

कोई जावास्क्रिप्ट त्रुटियां नहीं आती हैं, लेकिन छुपाएं() और शो() कॉल केवल प्रदर्शन प्रॉपर्टी को संशोधित नहीं करते हैं। मैंने बिना किसी लाभ के css('display', 'none') पर कॉल करने का भी प्रयास किया है।

यदि मैं कॉल को $ ('। Edit-version') में बदलता हूं। छुपाएं() कॉल, यह काम करता है, लेकिन यह उस पृष्ठ पर अन्य divs को प्रभावित करेगा जो मैं प्रभावित नहीं करना चाहता हूं।

किसी भी मदद की सराहना की जाएगी।

Answer 1

यह एक बढ़िया समाधान नहीं है, लेकिन यह काम किया है। host स्कोप से पूरी तरह से छुटकारा पाएं और इसके बजाय चयनकर्ता में दायरे का उपयोग करके समस्या हल हो गई।

$('#employee-card-49 .edit-version').hide(); 
$('#employee-card-49 .read-only').show(); 

अजीब।

Answer 2

मुझे ऐसी स्थितियों का सामना करना पड़ा है जहां show() और hide() सापेक्ष स्थिति के कारण काम नहीं करते हैं। मैं यह सुनिश्चित करने के लिए जांच करता हूं कि आपके पास कोई अजीब स्थिति सेट नहीं है, या कम से कम कि बाल तत्वों की स्थिति माता-पिता से मेल खाती है। साथ ही, क्या आपने दो बार जांच की है कि display विशेषता किसी अन्य चीज़ द्वारा सेट नहीं हो रही है? हो सकता है कि कुछ इसे ब्लॉक या इनलाइन के साथ इनलाइन करने के लिए सेट कर रहा हो! महत्वपूर्ण!

Answer 3

इस प्रयास करें:

host = '#employee-card-49'; 
$('.edit-version', host).hide() 
$('.read-only', host).show(); 

Answer 4

किसी और यकीन है कि कुछ भी नहीं है यह अधिभावी है बनाने के लिए !important साथ यह स्थापित करने की कोशिश करें। एक और सीएसएस संपत्ति सेट करने का प्रयास करें, यह देखने के लिए कि यह ऑब्जेक्ट्स पर कार्य करता है या नहीं, यह सेट करने की संभावना नहीं है।

host = $('#employee-card-49'); 
$('.read-only', host).css({ display: 'block !important', 
          visibility: 'visible !important', 
          // Set unlikely property and see if anything changes 
          letter-spacing: '10px !important' }); 

इसके अलावा Firebug में जाँच:

• सीएसएस देखने के लिए और किसी भी विरासत को महत्व देता है यह हो सकता है।
• गणना चौड़ाई, ऊंचाई, गद्दी, आदि वस्तु के (लेआउट & अभिकलन टैब)

Answer 5

इसके लायक होने के लिए, मुझे क्रोम और सफारी के बीच अलग-अलग शो/छुपा व्यवहार मिल रहा था। सफारी को तत्व और आईडी की आवश्यकता होती है, केवल आईडी नहीं। तो:

$('form#myform').hide(); //Correct 

नहीं

$('#myform').hide(); //Problematic 

शायद बेहतर वैसे भी वर्बोस के लिए।