दृश्यता सेट करने के लिए jQuery का समतुल्य .हाइड (): छिपा हुआ

Question

JQuery में, सीएसएस सेटिंग सेट करने वाली विधियाँ .hide()और .show()विधियाँ हैं display: none।

क्या कोई समतुल्य फ़ंक्शन है जो visibility: hiddenसेटिंग सेट करेगा ?

मुझे पता है कि मैं उपयोग कर सकता हूं .css()लेकिन मैं कुछ फंक्शन पसंद करता हूं .hide()। धन्यवाद।

Comments

आप अपने खुद के आधार पर लागू कर सकते हैं.toggle()

— zerkms

मैं भी jQuery के toggleClass () इस :) के लिए विधि का एक प्रशंसक हूँ jqueryui.com/toggleClass महसूस उदाहरण मैं नीचे मेरा उत्तर में साझा की जाँच करने के लिए स्वतंत्र stackoverflow.com/a/14632687/1056713

— छाया कूपर

Answer 1

आप अपने खुद के प्लगइन्स बना सकते हैं।

jQuery.fn.visible = function() {
    return this.css('visibility', 'visible');
};

jQuery.fn.invisible = function() {
    return this.css('visibility', 'hidden');
};

jQuery.fn.visibilityToggle = function() {
    return this.css('visibility', function(i, visibility) {
        return (visibility == 'visible') ? 'hidden' : 'visible';
    });
};

यदि आप मूल jQuery को ओवरलोड करना चाहते हैं toggle(), जिसकी मैं अनुशंसा नहीं करता ...

!(function($) {
    var toggle = $.fn.toggle;
    $.fn.toggle = function() {
        var args = $.makeArray(arguments),
            lastArg = args.pop();

        if (lastArg == 'visibility') {
            return this.visibilityToggle();
        }

        return toggle.apply(this, arguments);
    };
})(jQuery);

jsFiddle ।

Comments

@ टॉमास आपको छाया देना होगा toggle()जो अन्य लिपियों को तोड़ सकता है। यदि आप चाहते हैं, तो आप यह toggle()निर्दिष्ट करने के लिए एक अतिरिक्त तर्क जोड़ सकते हैं कि क्या टॉगल किया जाना चाहिए visibilityया नहीं display। मैं हालांकि अपने अंतिम उदाहरण में कस्टम एक का उपयोग करूँगा। :)

— एलेक्स

क्या आप इस पर एक उदाहरण पोस्ट कर सकते हैं कि कैसे show(गति, सहजता, कॉलबैक) के अतिरिक्त मापदंडों का समर्थन किया जाए ?

— जियोर्ज

यदि आप इसे इस तरह से देखते हैं तो यह बहुत ही अच्छा है, लेकिन एक उद्देश्य है। यदि यह एक (function() { })()या समान के साथ किसी अन्य स्क्रिप्ट के लिए संक्षिप्त है , तो ASI किक नहीं करेगा क्योंकि यह एक फ़ंक्शन मंगलाचरण की तरह दिखता है। प्रयास करें इस , तो हटाने !।

— एलेक्स

@NoBugs स्वचालित अर्ध-उपनिवेश सम्मिलन। मैंने यहाँ इसके बारे में एक ब्लॉग पोस्ट लिखा था ।

— एलेक्स

@VishalSakaria यह वास्तव में एक अच्छी तरह से परिभाषित शब्द नहीं है जहाँ तक मुझे पता है, इसलिए यहाँ इसका उपयोग करना ठीक होना चाहिए।

— एलेक्स

Answer 2

वहाँ कोई निर्मित नहीं है, लेकिन आप अपना स्वयं का लेख आसानी से लिख सकते हैं:

(function($) {
    $.fn.invisible = function() {
        return this.each(function() {
            $(this).css("visibility", "hidden");
        });
    };
    $.fn.visible = function() {
        return this.each(function() {
            $(this).css("visibility", "visible");
        });
    };
}(jQuery));

फिर आप इसे इस तरह से कॉल कर सकते हैं:

$("#someElem").invisible();
$("#someOther").visible();

यहाँ एक काम करने का उदाहरण है ।

Comments

अच्छा बिंदु, बस आदत का एक बल। धन्यवाद। एलेक्स के जवाब के लिए +1!

— जेम्स एलाडिस

बस जिज्ञासु, क्या इन दो कार्यों को (function($) {...}(jQuery));आवरण में लपेटने की बात है ? मैंने jQuery में अपने स्वयं के कार्यों को कभी भी परिभाषित नहीं किया है, मैंने हमेशा सीधे जावास्क्रिप्ट में केवल कार्यों को परिभाषित किया है।

— VoidKing

@VoidKing - यह डॉक्स के अनुसार jQuery प्लगइन्स के लिए सिर्फ "सबसे अच्छा अभ्यास" है। यह आपको $फ़ंक्शन के अंदर पहचानकर्ता का उपयोग करने की अनुमति देता है , भले ही यह मूल क्षेत्र में किसी और चीज़ को संदर्भित करता हो।

— जेम्स एलार्डिस

jQuery वास्तव में एक toggleClass () इस के लिए विधि में बनाया गया है :) jqueryui.com/toggleClass महसूस उदाहरण मैं नीचे मेरा उत्तर में साझा की जाँच करने के लिए स्वतंत्र stackoverflow.com/a/14632687/1056713

— छाया कूपर

Answer 3

ऐसा करने का एक सरल तरीका jQuery का टॉगलक्लास () विधि का उपयोग करना है

सीएसएस

.newClass{visibility: hidden}

एचटीएमएल

<a href="#" class=trigger>Trigger Element </a>
<div class="hidden_element">Some Content</div>

जे एस

$(document).ready(function(){
    $(".trigger").click(function(){
        $(".hidden_element").toggleClass("newClass");
    });
});

Comments

मुझे यह तरीका पसंद है। यह कम आत्म-निहित है क्योंकि इसके लिए अलग-अलग स्टाइलशीट की आवश्यकता होती है, लेकिन यह स्टाइलशीट में सभी शैली की जानकारी रखने में मदद करता है, जहां यह होना चाहिए। यदि आप दृश्यता को निष्क्रिय करना चाहते हैं तो आप अपने सभी js कोड को बदलने के बजाय एक जगह पर css टैग बदल सकते हैं।

— वघन

बूटस्ट्रैप का उपयोग करने वालों के लिए, इस वर्ग को अदृश्य कहा जाता है।

— user239558

Answer 4

यदि आपको केवल दृश्यता के साथ छिपाने की मानक कार्यक्षमता की आवश्यकता है: वर्तमान लेआउट को रखने के लिए छिपाया गया तो आप टैग में सीएसएस को बदलने के लिए छिपाने के कॉलबैक फ़ंक्शन का उपयोग कर सकते हैं। Jquery में डॉक्स छिपाएं

एक उदाहरण :

$('#subs_selection_box').fadeOut('slow', function() {
      $(this).css({"visibility":"hidden"});
      $(this).css({"display":"block"});
});

यह डिव को छिपाने के लिए सामान्य कूल एनीमेशन का उपयोग करेगा, लेकिन एनीमेशन खत्म होने के बाद आप विजिबिलिटी को छिपाएंगे और ब्लॉक करने के लिए डिस्प्ले करेंगे।

एक उदाहरण: http://jsfiddle.net/bTkKG/1/

मुझे पता है कि आप $ ("# आ") नहीं चाहते हैं। सीएसएस () समाधान, लेकिन आपने यह नहीं बताया कि क्या यह था क्योंकि केवल सीएसएस () पद्धति का उपयोग करके आप एनीमेशन खो देते हैं।

Answer 5

यहां एक कार्यान्वयन है, जो काम करता है $.prop(name[,value])या $.attr(name[,value])कार्य करता है। यदि bचर भरा जाता है, तो दृश्यता उसी के अनुसार सेट की जाती है, और thisवापस लौटा दी जाती है (अन्य गुणों के साथ जारी रखने की अनुमति), अन्यथा यह दृश्यता मान लौटाता है।

jQuery.fn.visible = function (b) {
    if(b === undefined)
        return this.css('visibility')=="visible";
    else {
        this.css('visibility', b? 'visible' : 'hidden');
        return this;
    }
}

उदाहरण:

$("#result").visible(true).on('click',someFunction);
if($("#result").visible())
    do_something;

Answer 6

JQuery छिपाने के लिए शुद्ध जेएस बराबर () / शो ():

function hide(el) {
    el.style.visibility = 'hidden';    
    return el;
}

function show(el) {
    el.style.visibility = 'visible';    
    return el;
}

hide(document.querySelector(".test"));
// hide($('.test')[0])   // usage with jQuery

हम return elसंतुष्ट धाराप्रवाह इंटरफ़ेस "डेसिंग पैटर्न" के कारण उपयोग करते हैं ।

यहाँ काम कर रहा उदाहरण है ।

---

नीचे मैं अत्यधिक वैकल्पिक विकल्प भी प्रदान करता हूं , जो कि संभवतः "प्रश्न के करीब" उत्तर है:

HTMLElement.prototype.hide = function() {
    this.style.visibility = 'hidden';  
    return this;
}

HTMLElement.prototype.show = function() {
    this.style.visibility = 'visible';  
    return this;
}

document.querySelector(".test1").hide();
// $('.test1')[0].hide();   // usage with jQuery

बेशक यह jQuery 'प्रत्येक' को लागू नहीं करता है ( @JamesAllardice उत्तर में दिया गया है ) क्योंकि हम यहाँ शुद्ध js का उपयोग करते हैं।

काम करने का उदाहरण यहाँ है ।