मैं jQuery का उपयोग करके सीएसएस डिस्प्ले को कैसे बदल सकता हूं या संपत्ति को ब्लॉक नहीं कर सकता हूं।

429

jquery jquery-selectors

— DevOps
स्रोत

923

इसका उपयोग करने का सही तरीका है showऔर hide:

$('#id').hide();
$('#id').show();

एक वैकल्पिक तरीका jQuery css विधि का उपयोग करना है :

$("#id").css("display", "none");
$("#id").css("display", "block");

— djdd87
स्रोत

@GenericTypeTea: #idआईडी के लिए उपयोग किया जाता है अगर मैं उपयोग करना चाहता हूं तो क्या होगा class?

— अनाबिनगंज

26

$(".class").css("display", "none");

— djdd87

8

मैंने उपयोग करने की कोशिश की $('#id').css('display', 'none');, लेकिन यह काम नहीं किया। हालाँकि, $('#id').css('color', 'red');काम करता है का उपयोग कर । मुझे यकीन नहीं है कि क्यों, यद्यपि। क्या किसी के पास कोई विचार है? अग्रिम में धन्यवाद।

— डेविड

5

इस उत्तर में $ ('# id')। छिपाने () और $ ("# id")। Css ("प्रदर्शन", "कोई नहीं") के बीच अंतर को शामिल करना भी लायक है।

— मनिराजएसएस

1

दो के बीच एक अंतर है, जहां पूर्व फ़ंक्शन केवल पाठ को छिपाता है और एक तत्व द्वारा कब्जा किए गए स्थान को मुक्त नहीं करता है, जबकि बाद में सामग्री को छिपाते हैं और कोकरन तत्व द्वारा कब्जाए गए स्थान को मुक्त करते हैं

— गुरुंग

110

इसे पूरा करने के कई तरीके हैं, प्रत्येक का अपना इच्छित उद्देश्य है।

1 ) बस एक तत्व का उपयोग करते समय इनलाइन का उपयोग करने के लिए चीजों की सूची

$('#ele_id').css('display', 'block').animate(....
$('#ele_id').css('display', 'none').animate(....

2 ) कई सीएसएस गुण स्थापित करते समय उपयोग करने के लिए

$('#ele_id').css({
    display: 'none'
    height: 100px,
    width: 100px
});
$('#ele_id').css({
    display: 'block'
    height: 100px,
    width: 100px
});

3 ) गतिशील रूप से कमांड पर कॉल करने के लिए

$('#ele_id').show();
$('#ele_id').hide();

4 ) गतिशील रूप से ब्लॉक और कोई नहीं के बीच टॉगल करने के लिए, अगर यह एक div है

कुछ तत्वों, इनलाइन, इनलाइन-ब्लॉक, या तालिका के रूप में प्रदर्शित कर रहे हैं पर निर्भर करता है टा जी एन एएमई

$ ( '# Ele_id') टॉगल ()।;

— SpYk3HH
स्रोत

27

यदि डिव का प्रदर्शन डिफ़ॉल्ट रूप से ब्लॉक है, तो आप दृश्यता के बीच टॉगल करने के लिए बस .show()और .hide(), या सरल का भी उपयोग कर सकते हैं .toggle()।

— reko_t
स्रोत

सच है, यह शुरू में जो कुछ भी है, उसे प्रदर्शित करेगा, जो ब्लॉक या कुछ अलग हो सकता है।

— danielgwood

9

छिपाने के लिए:

$("#id").css("display", "none");

कार्यक्रम के लिए:

$("#id").css("display", "");

— फणीकुमार जाटवल्लभुला
स्रोत

6

JQuery सीएसएस विधि का उपयोग कर इसे करने का अन्य तरीका:

$("#id").css({display: "none"});
$("#id").css({display: "block"});

— मिगुएल
स्रोत

5

सरल तरीका:

function displayChange(){
$(content_id).click(function(){
  $(elem_id).toggle();}

)}

— user3726824
स्रोत

एक स्पष्टीकरण क्रम में होगा।

— पीटर मोर्टेंसन

2

(function($){
    $.fn.displayChange = function(fn){
        $this = $(this);
        var state = {};
        state.old = $this.css('display');
        var intervalID = setInterval(function(){
            if( $this.css('display') != state.old ){
                state.change = $this.css('display');
                fn(state);
                state.old = $this.css('display');
            }
        }, 100);        
    }

    $(function(){
        var tag = $('#content');
        tag.displayChange(function(obj){
            console.log(obj);
        });  
    })   
})(jQuery);

— फाम
स्रोत

एक स्पष्टीकरण क्रम में होगा।

— पीटर मोर्टेंसन

2

यदि आप किसी तत्व को छिपाना और दिखाना चाहते हैं, तो यह इस पर निर्भर करता है कि वह पहले से ही दिखाई दे रहा है या नहीं, इसके बजाय आप टॉगल का उपयोग कर सकते हैं .hide()और.show()

$('elem').toggle();

— व्लादिमीर का मुकदमा
स्रोत

1

.hide () मेरे लिए Chrome में काम नहीं करता है।

यह छिपाने के लिए काम करता है:

var pctDOM = jQuery("#vr-preview-progress-content")[0];
pctDOM.hidden = true;

— jimver04
स्रोत

0

मेरे मामले में मैं एक फार्म के तत्वों को दिखा / छिपा रहा था कि क्या इनपुट तत्व खाली था या नहीं, ताकि जब तत्वों को छिपाकर छिपाया गया तत्व अपने स्थान पर कब्जा कर रखे थे, तो यह एक फ्लोट करने के लिए आवश्यक था: बाएं ऐसे तत्व का तत्व। यहां तक कि निर्भरता के रूप में एक प्लगइन का उपयोग करना भी फ्लोट का उपयोग करना आवश्यक था।

— user2341112
स्रोत

0

इसे इस्तेमाल करो:

$("#id").(":display").val("block");

या:

$("#id").(":display").val("none");

— Trikaldarshi
स्रोत

मेरे लिए मेरे काम न करने की समस्या है :(।

<style>     #choosepath {         display: none;     } </style>  <script>         $(document).ready(function () {             $('#btn_journey').click(function () {                 alert("button click");                 $('#choosepath').css({"display":"normal"});             });         }); </script>   </head> <body>     <a href="#" class="btn btn-primary btn-lg" id="btn_journey">Start your journey</a>     <div class="col-lg-3 col-md-6 mb-4" id="choosepath">     </div> </body></html>

— jaibalaji

0

उपयोग:

$(#id/.class).show()
$(#id/.class).hide()

यह एक सबसे अच्छा तरीका है।

— सईद अहमद
स्रोत