Chrome में काम नहीं कर रहा है

Question

if ($("#makespan").is(":visible") == true) { 
    var make = $("#make").val(); 
}
else {
    var make = $("#othermake").val(); 
}

Make:<span id=makespan><select id=make></select><span id=othermakebutton class=txtbutton>Other?</span></span><span id=othermakespan style="display: none;"><input type=text name=othermake id=othermake>&nbsp;-&nbsp;<span id=othermakecancel class=txtbutton>Cancel</span></span>

उपरोक्त कोड फ़ायरफ़ॉक्स में आसानी से चलता है, लेकिन क्रोम में काम नहीं करता है। क्रोम में यह .is(":visible") = falseतब भी दिखाता है जब यह होता है true।

मैं jQuery के संस्करण का उपयोग कर रहा हूं: jquery-1.4.3.min.js

jsField लिंक: http://jsfiddle.net/WJU2r/4/

Comments

अधिमानतः एक jsfiddle लिंक में? और संभवतः jquery.latest के साथ इसे जांचें।

— xaxxon

makaspan प्रदर्शित हो सकता है: कोई नहीं, या दृश्यता: छिपी?

— आर्टूर कीयन

और शायद नवीनतम jQuery के संस्करण के लिए अस्थायी रूप से अद्यतन, बस एक jQuery बग बाहर शासन करने के लिए?

— स्ट्रालोक

इसे भी देखें: bugs.jquery.com/ticket/13132 ऐसा लगता है कि यह संस्करण १.१२ / २.२ में तय किया जाएगा! -

— ग्लेन लिटिल

यदि कथन में "== सत्य" जोड़ने की आवश्यकता नहीं है: यदि ($ ("# मेकपैन") है, तो (": दृश्यमान") बड़ा है

— marcdahan

Answer 1

ऐसा लगता :visibleहै कि क्रोम में कुछ इनलाइन तत्वों के लिए jQuery का चयनकर्ता काम नहीं करता है। इसका समाधान प्रदर्शन शैली को जोड़ना, पसंद करना "block"या "inline-block"इसे काम करना है।

यह भी ध्यान दें कि jQuery के पास कुछ डेवलपर्स की तुलना में दिखाई देने वाली कुछ अलग परिभाषा है:

यदि वे दस्तावेज़ में स्थान का उपभोग करते हैं, तो तत्व दिखाई देते हैं।
दृश्यमान तत्वों की चौड़ाई या ऊँचाई शून्य से अधिक होती है।

दूसरे शब्दों में, एक तत्व में अंतरिक्ष की खपत और दृश्यमान होने के लिए एक गैर-शून्य चौड़ाई और ऊंचाई होनी चाहिए।

तत्वों के साथ visibility: hiddenया opacity: 0उन्हें दृश्यमान माना जाता है, क्योंकि वे अभी भी लेआउट में जगह का उपभोग करते हैं।

दूसरी ओर, भले ही इसका visibilityसेट अप करने के लिए hiddenया अस्पष्टता शून्य हो, यह अभी भी :visiblejQuery के लिए है क्योंकि यह अंतरिक्ष का उपभोग करता है, जो कि भ्रमित हो सकता है जब CSS स्पष्ट रूप से कहता है कि इसकी दृश्यता छिपी हुई है।

तत्व जो किसी दस्तावेज़ में नहीं हैं उन्हें छिपा हुआ माना जाता है; jQuery के पास यह जानने का कोई तरीका नहीं है कि क्या वे किसी दस्तावेज में संलग्न होने के बाद दिखाई देंगे क्योंकि यह लागू शैलियों पर निर्भर करता है।

सभी विकल्प तत्व छिपे हुए माने जाते हैं, चाहे उनकी चयनित स्थिति कुछ भी हो।

किसी तत्व को छिपाने वाले एनिमेशन के दौरान, तत्व को एनीमेशन के अंत तक दिखाई देता है। किसी तत्व को दिखाने के लिए एनिमेशन के दौरान, तत्व को एनीमेशन में शुरुआत में दिखाई देता है।

इसे देखने का आसान तरीका यह है कि यदि आप स्क्रीन पर तत्व को देख सकते हैं, भले ही आप इसकी सामग्री को नहीं देख सकते, यह पारदर्शी है, आदि, यह दृश्यमान है, अर्थात इसमें स्थान है।

मैंने आपके मार्कअप को थोड़ा साफ किया और एक प्रदर्शन शैली ( यानी "डिस्प्ले को" ब्लॉक करने के लिए तत्वों को सेट करना आदि ) को जोड़ा , और इसके लिए यह काम किया:

बेला

के लिए आधिकारिक एपीआई संदर्भ :visible

---

JQuery 3 के रूप में, परिभाषा :visibleथोड़ी बदल गई है

jQuery 3 थोड़ा :visible(और इसलिए :hidden) का अर्थ संशोधित करता है ।
इस संस्करण से शुरू होने पर, तत्वों पर विचार किया जाएगा :visibleयदि उनके पास कोई लेआउट बॉक्स है, जिसमें शून्य चौड़ाई और / या ऊंचाई शामिल है। उदाहरण के लिए, brबिना किसी सामग्री वाले तत्वों और इनलाइन तत्वों को :visibleचयनकर्ता द्वारा चुना जाएगा ।

Comments

मैंने jsFiddle में व्यक्तिगत घटकों को चिपकाने की भी कोशिश की और यह ठीक काम किया। मैं jsFiddle में त्रुटि को दोहराने की कोशिश करूंगा और फिर लिंक पोस्ट करूंगा। शायद कोड में कुछ और इस त्रुटि का कारण बन रहा है

— साद बशीर

मैंने निम्नलिखित लिंक पर समस्या को दोहराया है: jsfiddle.net/WJU2r/3

— साद बशीर

बहुत धन्यवाद कि काम किया! मुझे पता नहीं क्यों लेकिन #mespespan {प्रदर्शन: ब्लॉक की स्थापना; } यह काम किया।

— साद बशीर

मूल पोस्टर की टिप्पणी में वास्तविक समाधान है, IE, आपके स्पैन को प्रदर्शित करता है: ब्लॉक। मूर्खतापूर्ण है कि क्रोम में डिफ़ॉल्ट रूप से स्पैन अदृश्य होते हैं, लेकिन, जो भी हो।

— जेफ डेविस

यदि आप & nbsp जोड़ते हैं तो यह पर्याप्त है; तत्व, क्योंकि अगर किसी तत्व में कोई सामग्री नहीं है तो यह क्रोम में अदृश्य है

— ब्रिगंती

Answer 2

मुझे नहीं पता कि आपका कोड क्रोम पर काम क्यों नहीं करता है, लेकिन मेरा सुझाव है कि आप कुछ वर्कअराउंड का उपयोग करें:

$el.is(':visible') === $el.is(':not(:hidden)');

या

$el.is(':visible') === !$el.is(':hidden');  

यदि आप निश्चित हैं कि jQuery आपको क्रोम में कुछ बुरे परिणाम देता है, तो आप बस css नियम की जाँच पर भरोसा कर सकते हैं:

if($el.css('display') !== 'none') {
    // i'm visible
}

साथ ही, आप नवीनतम jQuery का उपयोग करना चाह सकते हैं क्योंकि इसमें पुराने संस्करण से बग फिक्स हो सकते हैं।

Comments

मैंने निम्नलिखित लिंक पर समस्या को दोहराया है: jsfiddle.net/WJU2r/3

— साद बशीर

इस प्रश्न का विवरण क्या अंतर के बीच है :hiddenऔर :not(:visible)। stackoverflow.com/questions/17425543/…

— मार्क शुल्त्स

फ़ंक्शन (': दृश्यमान') या .is (': छिपा हुआ') या है (': नहीं: (छिपा हुआ)') प्रदर्शन के लिए बहुत बुरा है

— डियागो सीआईडी

Answer 3

एक अजीब मामला है जहां अगर तत्व display: inlineदृश्यता विफल होने के लिए jQuery के चेक पर सेट है ।

उदाहरण:

सीएसएस

#myspan {display: inline;}

jQuery

$('#myspan').show(); // Our element is `inline` instead of `block`
$('#myspan').is(":visible"); // This is false

इसे ठीक करने के लिए आप jQuery में और से तत्व छिपा कर सकते हैं show/hideया toggle()ठीक काम करना चाहिए।

$('#myspan').hide()
$('#otherElement').on('click', function() {
    $('#myspan').toggle();
});

Comments

मुझे PhantomJS के साथ यह समस्या आ रही है लेकिन Chrome 47.0.2526 पर यह काम करने लगता है। देखें: jsfiddle.net/k4b925gn/2

— ekkis

Answer 4

मुझे लगता है कि यह हमारे HTML में एक quirk के साथ कुछ करना है क्योंकि एक ही पृष्ठ पर अन्य स्थान ठीक काम करते हैं।

इस समस्या को हल करने का एकमात्र तरीका मुझे यह करना था:

if($('#element_id').css('display') == 'none')
{
   // Take element is hidden action
}
else
{
   // Take element is visible action
}

Answer 5

यदि आप jquery डॉक्स को पढ़ते हैं, तो किसी चीज़ के दिखाई न देने / छिपे न होने के कई कारण हैं:

उनके पास कोई भी नहीं सीएसएस प्रदर्शन मूल्य है।

वे प्रकार = "छिपे हुए" के साथ तत्व हैं।

उनकी चौड़ाई और ऊंचाई स्पष्ट रूप से 0 पर सेट है।

एक पूर्वज तत्व छिपा हुआ है, इसलिए पृष्ठ पर तत्व नहीं दिखाया गया है।

http://api.jquery.com/visible-selector/

यहाँ एक छोटा jsfiddle उदाहरण है जिसमें एक दृश्य और एक छिपा हुआ तत्व है:

http://jsfiddle.net/tNjLb/

Comments

मैंने निम्नलिखित लिंक पर समस्या को दोहराया है: jsfiddle.net/WJU2r/3

— साद बशीर

Answer 6

इंटरनेट एक्सप्लोरर, क्रोम, फ़ायरफ़ॉक्स ...

क्रॉस ब्राउज़र फ़ंक्शन "अदृश्य ()"

//check if exist and is visible
function isVisible(id) {
    var element = $('#' + id);
    if (element.length > 0 && element.css('visibility') !== 'hidden' && element.css('display') !== 'none') {
        return true;
    } else {
        return false;
    }
}

पूर्ण उदाहरण:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script type="text/javascript">
            //check if exist and is visible
            function isVisible(id) {
                var element = $('#' + id);
                if (element.length > 0 && element.css('visibility') !== 'hidden' && element.css('display') !== 'none') {
                    return true;
                } else {
                    return false;
                }
            }

            function check(id) {
                if (isVisible(id)) {
                    alert('visible: true');
                } else {
                    alert('visible: false');
                }
                return false;
            }
        </script>

        <style type="text/css">
            #fullname{
                display: none;
            }
            #vote{
                visibility: hidden;
            }
        </style>
        <title>Full example: isVisible function</title>
    </head>
    <body>
        <div id="hello-world">
            Hello World!
        </div>
        <div id="fullname">
            Fernando Mosquera Catarecha
        </div>
        <div id="vote">
            rate it!
        </div>
        <a href="#" onclick="check('hello-world');">Check isVisible('hello-world')</a><br /><br />
        <a href="#" onclick="check('fullname');">Check isVisible('fullname')</a><br /><br />
        <a href="#" onclick="check('vote');">Check isVisible('vote')</a>
    </body>
</html>

सादर,

फर्नांडो

Answer 7

आम तौर पर मैं इस स्थिति में रहता हूं जब मेरी वस्तु के माता-पिता छिपे होते हैं। उदाहरण के लिए जब html इस प्रकार है:

    <div class="div-parent" style="display:none">
        <div class="div-child" style="display:block">
        </div>
    </div>

यदि आप पूछें कि क्या बच्चा दिखाई दे रहा है जैसे:

    $(".div-child").is(":visible");

यह झूठे वापस आ जाएगा क्योंकि इसके माता-पिता दिखाई नहीं दे रहे हैं ताकि div अभ्यस्त दिखाई दे, भी।

Comments

मेरा समाधान कम देखें ... अपने बच्चे को 'इनहेरिट' करने के लिए सेट डिसप्ले में, वह राज्य को उसके पेरेंट आइटम से कॉपी करेगा, इसलिए यदि वह छिपा हुआ है elemtn.is ("छिपा हुआ") काम करेगा

— पैट्रिक

Answer 8

यह देखने के लिए कि क्या तत्व दिखाई दे रहा है, यह निर्धारित करने के लिए एक क्रॉस ब्राउज़र / संस्करण समाधान है, शो / छिपाने पर तत्व में एक सीएसएस वर्ग जोड़ना / हटाना है। तत्व की डिफ़ॉल्ट (दृश्यमान) स्थिति इस प्रकार हो सकती है:

<span id="span1" class="visible">Span text</span>

फिर छिपाने पर, कक्षा को हटा दें:

$("#span1").removeClass("visible").hide();

दिखाने पर, इसे फिर से जोड़ें:

$("#span1").addClass("visible").show();

फिर यह निर्धारित करने के लिए कि क्या तत्व दिखाई दे रहा है, इसका उपयोग करें:

if ($("#span1").hasClass("visible")) { // do something }

यह प्रदर्शन निहितार्थों को भी हल करता है, जो ": दृश्यमान" चयनकर्ता के भारी उपयोग पर हो सकता है, जो कि जे के प्रलेखन में इंगित किया गया है:

इस चयनकर्ता का भारी उपयोग करने से प्रदर्शन निहितार्थ हो सकते हैं, क्योंकि यह दृश्यता निर्धारित करने से पहले ब्राउज़र को पृष्ठ को फिर से प्रस्तुत करने के लिए मजबूर कर सकता है। उदाहरण के लिए एक वर्ग का उपयोग करके अन्य तरीकों के माध्यम से तत्वों की दृश्यता को ट्रैक करना, बेहतर प्रदर्शन प्रदान कर सकता है।

"दृश्यमान" चयनकर्ता के लिए आधिकारिक jQuery एपीआई प्रलेखन

Answer 9

मैंने माता-पिता और .is ("दृश्यमान") पर अगली शैली जोड़ी।

प्रदर्शन: इनलाइन-ब्लॉक;

Answer 10

यदि कोई आइटम उस आइटम का बच्चा है जिसे छिपाया गया है ("दृश्यमान") सच लौटेगा, जो गलत है।

मैंने इसे चाइल्ड आइटम में "डिस्प्ले: इनहेरिट" जोड़ा है। यह मेरे लिए तय हो जाएगा:

<div class="parent">
   <div class="child">
   </div>
<div>

और सीएसएस:

.parent{
   display: hidden;
}
.child{
   display: inherit;
}

अब माता-पिता की दृश्यता बदलकर आइटम को प्रभावी रूप से चालू और बंद किया जा सकता है, और $ (तत्व) .is (": दृश्यमान") मूल आइटम की दृश्यता लौटाएगा।

Answer 11

यह jquery.js से कोड का टुकड़ा है जो तब निष्पादित होता है जब ("दृश्यमान") कहा जाता है:

if (jQuery.expr && jQuery.expr.filters){

    jQuery.expr.filters.hidden = function( elem ) {
        return ( elem.offsetWidth === 0 && elem.offsetHeight === 0 ) || (!jQuery.support.reliableHiddenOffsets && ((elem.style && elem.style.display) || jQuery.css( elem, "display" )) === "none");
    };

    jQuery.expr.filters.visible = function( elem ) {
        return !jQuery.expr.filters.hidden( elem );
    };
}

जैसा कि आप देख सकते हैं, यह सिर्फ सीएसएस प्रदर्शन संपत्ति से अधिक का उपयोग करता है। यह तत्व की सामग्री की चौड़ाई और ऊंचाई पर भी निर्भर करता है। इसलिए, सुनिश्चित करें कि तत्व में कुछ चौड़ाई और ऊंचाई है। और ऐसा करने के लिए, आपको डिस्प्ले प्रॉपर्टी को "inline-block"या पर सेट करना पड़ सकता है"block"

Answer 12

मुझे दृश्यता का उपयोग करने की आवश्यकता है : छिपा हुआ प्रदर्शन के संकेत : कोई नहीं क्योंकि दृश्यता घटनाओं को लेती है, जबकि प्रदर्शन नहीं करता है।

इसलिए मैं करता हूँ .attr('visibility') === "visible"