দৃশ্যমানতা সেট করতে jQuery .hide () এর সমতুল্য: লুকানো

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);

jsFizz ।

Comments

@ টমাসকে আপনার ছায়া থাকতে হবে toggle()যা অন্যান্য স্ক্রিপ্টগুলি ভেঙে দিতে পারে। আপনি চান, তাহলে আপনি একটি অতিরিক্ত যুক্তি যোগ করতে পারিনি toggle()উল্লেখ করা হবে কিনা তা visibilityবা displayটগল করতে হবে। তবে আমি কেবল আমার শেষ উদাহরণটিতে কাস্টমটি ব্যবহার করব। :)

— অ্যালেক্স

আপনি কীভাবে show(গতি, ইজিং, কলব্যাক) অতিরিক্ত পরামিতিগুলি সমর্থন করবেন তার একটি উদাহরণ পোস্ট করতে পারেন ?

— জর্জি

আপনি যদি সেভাবে এটি দেখেন তবে এটি অতিমাত্রায়। এটি অন্য কোনও স্ক্রিপ্টের সাথে (function() { })()একই বা অনুরূপভাবে যুক্ত হলে এএসআই কিক করবে না কারণ এটি কোনও ফাংশন অনুরোধের মতো দেখাচ্ছে। ব্যবহার করে দেখুন এই , তারপর অপসারণ !।

— অ্যালেক্স

@ NoBugs স্বয়ংক্রিয় আধা-কোলন সন্নিবেশ। আমি এটি সম্পর্কে একটি ব্লগ পোস্ট এখানে লিখেছিলাম ।

— অ্যালেক্স

@ বিশালসাকারিয়া এটি যতটা আমার জানা হিসাবে সত্যই সংজ্ঞায়িত শব্দ নয়, সুতরাং এটি এখানে ব্যবহার করা ঠিক হবে।

— অ্যালেক্স

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 এর আগে আমার নিজের ফাংশনগুলি কখনই সংজ্ঞায়িত করিনি, আমি সর্বদা সরাসরি জাভাস্ক্রিপ্টে কেবল ফাংশন সংজ্ঞায়িত করেছি।

— ভয়েডকিং

@ ভয়েডকিং - ডকস অনুযায়ী 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

আমি এই পদ্ধতির পছন্দ। এটি কম স্ব-অন্তর্ভুক্ত কারণ এর জন্য পৃথক স্টাইলশিট প্রয়োজন, তবে এটি স্টাইলশীটগুলিতে সমস্ত স্টাইলের তথ্য রাখতে পারে যেখানে এটি হওয়া উচিত। আপনি যদি দৃশ্যমানতাটি অক্ষম করতে চান তবে আপনি আপনার সমস্ত জেএস কোড পরিবর্তন না করে এক জায়গায় একটি CSS ট্যাগ পরিবর্তন করতে পারেন।

— ভান

বুটস্ট্র্যাপ ব্যবহারকারীদের জন্য, এই শ্রেণিকে অদৃশ্য বলা হয়।

— ব্যবহারকারী 239558

Answer 4

আপনার যদি কেবলমাত্র দৃশ্যমানতার সাথে আড়াল করার মানক কার্যকারিতা প্রয়োজন হয়: বর্তমান লেআউটটি রাখতে লুকানো আপনি ট্যাগটিতে সিএসএস পরিবর্তন করতে আড়াল করার কলব্যাক ফাংশনটি ব্যবহার করতে পারেন। জ্যাকুরিতে ডকস লুকান

একটি উদাহরণ :

$('#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

জিকুয়েরি লুকানোর () / শো () এর জন্য খাঁটি জেএস সমতুল্য:

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 'প্রতিটি' বাস্তবায়িত করে না ( @ জেমস অ্যালার্ডাইস উত্তরে দেওয়া ) কারণ আমরা এখানে খাঁটি জেএস ব্যবহার করি।

কাজের উদাহরণ এখানে ।