JQuery এর .hide () এবং প্রদর্শন করার জন্য CSS সেট করার মধ্যে পার্থক্য: কোনও কিছুই নয়

Question

আমি কোনটি করা থেকে ভাল? .hide()লেখার চেয়ে দ্রুত .css("display", "none"), তবে পার্থক্য কী এবং এই দুজনই আসলে এইচটিএমএল উপাদানটির সাথে কী করছে?

Answer 1

হাইড () সম্পর্কে jQuery পৃষ্ঠা থেকে :

"মিলিত উপাদানগুলি তাত্ক্ষণিকভাবে লুকানো থাকবে, কোনও অ্যানিমেশন ছাড়াই This এটি মোটামুটি .css ('প্রদর্শন', 'কিছুই নয়') কল করার সমতুল্য, ব্যতীত ডিসপ্লের সম্পত্তিটির মূল্য jQuery এর ডেটা ক্যাশে সংরক্ষণ করা হয় যাতে পরে প্রদর্শন করা যায় এটির প্রাথমিক মানটিতে পুনরুদ্ধার করা হবে। যদি কোনও উপাদানের ইনলাইনটির একটি ডিসপ্লে মান থাকে তবে তা লুকিয়ে থাকে এবং দেখানো হয়, এটি আবার একবার ইনলাইন প্রদর্শিত হবে। "

সুতরাং যদি এটি গুরুত্বপূর্ণ যে আপনি পূর্বের মানটিতে ফিরে যেতে সক্ষম হলেন display, আপনি আরও ভাল ব্যবহার করতে চাইবেন hide()কারণ সেই পথে আগের অবস্থার কথা মনে পড়ে। তা ছাড়া কোনও পার্থক্য নেই।

$(function() {
    $('.hide').click(function(){
        $('.toggle').hide();
        setDisplayValue();
    });
    $('.show').click(function(){
        $('.toggle').show();
        setDisplayValue();
    });
});

function setDisplayValue() {
    var display = $('.toggle')[0].style.display;
    $('.displayvalue').text(display);
}

div {
    display: table-cell;
    border: 1px solid;
    padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
    <button class="hide">Hide</button>
    <button class="show">Show</button>
</p>

<div class="toggle">Lorem Ipsum</div>

<p>
    The display value of the div is:
    <span class="displayvalue"></span>
</p>

Comments

হাইড ব্যবহার করে সমস্যাটি পুনরায় লোড সাইটের পরে উপাদানটি 2 সেকেন্ডের মধ্যে লুকিয়ে থাকা লুকিয়ে রয়েছে

— টিএম

Answer 2

.hide()দোকানে পূর্ববর্তী display সম্পত্তি শুধু এটা সংযোজনা করার আগে none, তাই যদি এটা মান ছিল না displayউপাদান আপনি একটি বিট নিরাপদ জন্য সম্পত্তি, .show()কি ফিরে যেতে হিসাবে এই সঞ্চিত সম্পত্তি ব্যবহার করবে। সুতরাং ... এটি কিছু অতিরিক্ত কাজ করে তবে আপনি যদি প্রচুর পরিমাণে উপাদান না করেন তবে গতির পার্থক্য নগণ্য হওয়া উচিত।

Answer 3

JQuery কোডটি দেখে, যা ঘটে তা ঘটে:

hide: function( speed, easing, callback ) {
    if ( speed || speed === 0 ) {
        return this.animate( genFx("hide", 3), speed, easing, callback);

    } else {
        for ( var i = 0, j = this.length; i < j; i++ ) {
            var display = jQuery.css( this[i], "display" );

            if ( display !== "none" ) {
                jQuery.data( this[i], "olddisplay", display );
            }
        }

        // Set the display of the elements in a second loop
        // to avoid the constant reflow
        for ( i = 0; i < j; i++ ) {
            this[i].style.display = "none";
        }

        return this;
    }
},

Answer 4

তারা একই জিনিস। .hide()একটি jQuery ফাংশন কল করে এবং আপনাকে এতে একটি কলব্যাক ফাংশন যুক্ত করার অনুমতি দেয়। সুতরাং, .hide()আপনি উদাহরণস্বরূপ একটি অ্যানিমেশন যোগ করতে পারেন।

.css("display","none")উপাদানটির বৈশিষ্ট্যটিতে পরিবর্তন করে display:none। আপনি জাভাস্ক্রিপ্টে নিম্নলিখিত কাজগুলি হিসাবে একই:

document.getElementById('elementId').style.display = 'none';

.hide()ফাংশন স্পষ্টত এটা কলব্যাক কাজকর্মের জন্য চেক, গতি, ইত্যাদি চালানোর জন্য বেশি সময় লাগে ...

Answer 5

উভয় ব্যবহার করা একটি দুর্দান্ত উত্তর; এটি উভয়ই বা এর কোন প্রশ্ন নয়।

সুবিধা উভয় ব্যবহারের যে সিএসএস অবিলম্বে উপাদান লুকাবো যখন পৃষ্ঠা লোড। JQuery .হাইড এক সেকেন্ডের চতুর্থাংশের জন্য উপাদানটি ফ্ল্যাশ করবে তারপরে এটি আড়াল করবে।

সেক্ষেত্রে যখন পৃষ্ঠাটি লোড হয় তখন আমরা সিএসএস ব্যবহার করতে এবং প্রদর্শন সেট করতে পারি: উপাদানটি না দেখানো উচিত: কিছুই নেই এবং jQuery। লুকান () ব্যবহার করুন। যদি আমরা উপাদানটি টগল করার পরিকল্পনা করি আমরা jQuery টগল ব্যবহার করতে পারি।

Answer 6

উভয়ই সমস্ত ব্রাউজারে একই কাজ করে, আফাইক। Chrome এবং ফায়ারফক্স, উভয় পরিশেষে যোগ উপর পরীক্ষা করা display:noneথেকে styleউপাদান অ্যাট্রিবিউট।

Answer 7

আপনি যদি বেসিক হাইড পদ্ধতি ব্যবহার করেন তবে কোনও পার্থক্য নেই See তবে jquery বিভিন্ন হাইড পদ্ধতি সরবরাহ করে যা উপাদানকে প্রভাব দেয়। বিস্তারিত ব্যাখ্যার জন্য নীচের লিঙ্কটি দেখুন: জ্যাকুরিতে লুকানোর জন্য প্রভাব