2011-12-23 10 views
42

मैं एक ऐसी स्क्रिप्ट लिखने की कोशिश कर रहा हूं जो अन्य तत्व दृश्यता के आधार पर विभाजित/दिखाएगा। जब मैं अन्य तत्व पर क्लिक करता हूं तो कार्रवाई होनी चाहिए। यहां मैंने जो लिखा है, वह है:jQuery यदि दृश्यता की जांच करने के लिए jQuery

$('#column-left form').hide(); 
    $('.show-search').click(function() { 
     $('#column-left form').stop(true, true).slideToggle(300); 
     if($('#column-left form').css('display') == 'none') { 
      $("#offers").show(); 
     } else { 
      $('#offers').hide(); 
     } 
    }); 

यह div को छुपाता है, लेकिन जब मैं फॉर्म छुपाता हूं तो यह वापस नहीं आता है। किसी भी मदद के लिए :) आभारी होंगे

संपादित करें:

ठीक है, मैं इस लिख कर वांछित प्रभाव हासिल करने में कामयाब रहे है:

$('#column-left form').hide(); 
    $('.show-search').click(function() { 
     if ($('#column-left form').is(":hidden")) { 
      $('#column-left form').slideToggle(300); 
      $('#offers').hide(); 
     } else { 
      $('#column-left form').slideToggle(300); 
      $("#offers").show(); 
     } 
    }); 

मैं अगर इसे सही ढंग से लिखा है पता नहीं है लेकिन यह काम करता है;) मदद के लिए सभी को धन्यवाद!

उत्तर

115

आप .is(':visible') उपयोग कर सकते हैं अगर कुछ दिखाई दे रहा है परीक्षण करने के लिए और .is(':hidden') विपरीत के लिए परीक्षण करने के लिए:

$('#offers').toggle(!$('#column-left form').is(':visible')); // or: 
$('#offers').toggle($('#column-left form').is(':hidden')); 

संदर्भ:

+1

यह तत्व सत्य दिखाई देता है या यदि यह नहीं है तो 'गलत' देता है। ध्यान देने योग्य।;) – Purag

+5

"परीक्षण करने के लिए" प्रकार का अर्थ यह है कि यह एक बुलियन लौटाता है;) – ThiefMaster

+0

@Purmou:! $ ('# कॉलम-बाएं फॉर्म')। (': दृश्यमान') निश्चित रूप से एक बूलियन मान वापस करेगा, हालांकि यह कथन टॉगल के भीतर संलग्न है इसलिए इसे वांछित आउटपुट प्राप्त करना चाहिए। –

2

कोशिश

if ($('#column-left form:visible').length > 0) { ... 
+0

काम नहीं करेगा, यहां तक ​​कि एक खाली jQuery ऑब्जेक्ट भी एक बुलियन संदर्भ ('!! [] === सच') में 'सत्य' का मूल्यांकन करता है। आप इसे काम करने के लिए '। लम्बाई' जोड़ सकते हैं। – ThiefMaster

+0

@ थिफमास्टर: मैंने कोंटूर का जवाब संपादित कर लिया है, इसलिए अब यह सही है! – NickGreen

+1

टाई, डाउनवोट हटा दिया गया। मैं '> 0' को छोड़ दूंगा हालांकि यद्यपि लंबाई कभी भी नकारात्मक नहीं होगी। – ThiefMaster

1
$('#column-left form').hide(); 
$('.show-search').click(function() { 
    $('#column-left form').stop(true, true).slideToggle(300); //this will slide but not hide that's why 
    $('#column-left form').hide(); 
    if(!($('#column-left form').is(":visible"))) { 
     $("#offers").show(); 
    } else { 
     $('#offers').hide(); 
    } 
    }); 
4

हाँ आप jQuery में .is(':visible') उपयोग कर सकते हैं। लेकिन जबकि सफारी ब्राउज़र .is(':visible') के तहत कोड चल रहा है, काम नहीं करेगा।

तो नीचे दिए गए कोड

if($(".example").offset().top > 0) 

का इस्तेमाल करें ऊपर लाइन भी सफारी के साथ ही दोनों आईई काम करेंगे।

0

.is (": दिखाई") के उपयोग से संबंधित एक प्रदर्शन समस्या दूर करने के बाद, मैं ऊपर जवाब के खिलाफ की सिफारिश करेंगे और बदले तय करने के लिए एक एकल तत्व दिखाई दे रहा है के लिए jQuery के कोड का उपयोग करें:

$.expr.filters.visible($("#singleElementID")[0]); 

क्या .is यह जांचता है कि तत्वों का एक सेट तत्वों के दूसरे सेट के भीतर है या नहीं। तो आप अपने पृष्ठ पर दृश्य तत्वों के पूरे सेट के भीतर अपने तत्व की तलाश करेंगे। 100 तत्व होने के कारण बहुत सामान्य है और दृश्य तत्वों की सरणी के माध्यम से खोजने के लिए कुछ मिलीसेकंड ले सकते हैं। यदि आप एक वेब ऐप बना रहे हैं तो शायद आपके पास सैकड़ों या संभवतः हजारों हैं। हमारा ऐप कभी-कभी $ ("# selector") के लिए 100ms ले रहा था। यह ("दृश्यमान") है क्योंकि यह जांच रहा था कि कोई तत्व 5000 अन्य तत्वों की सरणी में था या नहीं।

0

यदि दिखाई दे रहा है।

$("#Element").is(':visible'); 

यदि यह छिपा हुआ है।

$("#Element").is(':hidden'); 
संबंधित मुद्दे