javascript একটি উপাদান jQuery লুকানো হয় কিনা তা আমি কিভাবে পরীক্ষা করব?




dom visibility (24)

আপনি প্লেইন জাভাস্ক্রিপ্ট ব্যবহার করে এটি করতে পারেন:

function isRendered(domObj) {
    if ((domObj.nodeType != 1) || (domObj == document.body)) {
        return true;
    }
    if (domObj.currentStyle && domObj.currentStyle["display"] != "none" && domObj.currentStyle["visibility"] != "hidden") {
        return isRendered(domObj.parentNode);
    } else if (window.getComputedStyle) {
        var cs = document.defaultView.getComputedStyle(domObj, null);
        if (cs.getPropertyValue("display") != "none" && cs.getPropertyValue("visibility") != "hidden") {
            return isRendered(domObj.parentNode);
        }
    }
    return false;
}

নোট:

  1. সর্বত্র কাজ করে

  2. Nested উপাদান জন্য কাজ করে

  3. সিএসএস এবং ইনলাইন শৈলী জন্য কাজ করে

  4. একটি কাঠামো প্রয়োজন হয় না

ফাংশন ব্যবহার করে, একটি উপাদান দৃশ্যমানতা টগল করা সম্ভব। .hide() , .show() বা .toggle()

একটি উপাদান দৃশ্যমান বা লুকানো যদি আপনি কিভাবে পরীক্ষা করবে?


আপনি উভয় চেক করতে হবে ... প্রদর্শন পাশাপাশি দৃশ্যমানতা:

if ($(this).css("display") == "none" || $(this).css("visibility") == "hidden") {
    // The element is not visible
} else {
    // The element is visible
}

যদি আমরা $(this).is(":visible") চেক করি, jQuery স্বয়ংক্রিয়ভাবে উভয় জিনিসগুলির জন্য চেক করে।


এক সহজভাবে hidden বা visible বৈশিষ্ট্য ব্যবহার করতে পারেন, যেমন:

$('element:hidden')
$('element:visible')

অথবা আপনি নিম্নলিখিত হিসাবে একই সঙ্গে সহজ করতে পারেন।

$(element).is(":visible")

কিভাবে উপাদান দৃশ্যমানতা এবং jQuery কাজ করে ;

একটি উপাদান display:none সাথে লুকানো থাকতে পারে display:none , visibility:hidden বা opacity:0 । ঐ পদ্ধতির মধ্যে পার্থক্য:

  • display:none উপাদান লুকান, এবং এটি কোন স্থান গ্রহণ করা হয় না;
  • visibility:hidden উপাদান visibility:hidden , কিন্তু এটি এখনও লেআউট মধ্যে স্থান নেয়;
  • opacity:0 উপাদানটিকে "দৃশ্যমানতা: লুকানো" হিসাবে লুকিয়ে রাখে এবং এটি এখনও লেআউটটিতে স্থান নেয়; একমাত্র পার্থক্য হলো অপ্রাসঙ্গিকতাটি উপাদানটিকে স্বচ্ছভাবে স্বচ্ছ করতে দেয়।

    if ($('.target').is(':hidden')) {
      $('.target').show();
    } else {
      $('.target').hide();
    }
    if ($('.target').is(':visible')) {
      $('.target').hide();
    } else {
      $('.target').show();
    }
    
    if ($('.target-visibility').css('visibility') == 'hidden') {
      $('.target-visibility').css({
        visibility: "visible",
        display: ""
      });
    } else {
      $('.target-visibility').css({
        visibility: "hidden",
        display: ""
      });
    }
    
    if ($('.target-visibility').css('opacity') == "0") {
      $('.target-visibility').css({
        opacity: "1",
        display: ""
      });
    } else {
      $('.target-visibility').css({
        opacity: "0",
        display: ""
      });
    }
    

    দরকারী jQuery টগল পদ্ধতি:

    $('.click').click(function() {
      $('.target').toggle();
    });
    
    $('.click').click(function() {
      $('.target').slideToggle();
    });
    
    $('.click').click(function() {
      $('.target').fadeToggle();
    });
    

প্রায়ই যখন কিছু দৃশ্যমান হয় কিনা তা পরীক্ষা করা হয় বা না, আপনি অবিলম্বে এগিয়ে যেতে এবং এটির সাথে অন্য কিছু করতে যাচ্ছেন। jQuery চেইন এই সহজ করে তোলে।

সুতরাং যদি আপনার একটি নির্বাচক থাকে এবং আপনি যদি এটি দৃশ্যমান বা গোপন থাকে তবে এটিতে কিছু পদক্ষেপ সঞ্চালন করতে চান তবে আপনি filter(":visible") বা filter(":hidden") করতে পারেন। গ্রহণ করা.

সুতরাং পরিবর্তে একটি বিবৃতি, এই মত:

if ($('#btnUpdate').is(":visible"))
{
     $('#btnUpdate').animate({ width: "toggle" });   // Hide button
}

বা আরো দক্ষ, কিন্তু এমনকি উচ্ছৃঙ্খল:

var button = $('#btnUpdate');
if (button.is(":visible"))
{
     button.animate({ width: "toggle" });   // Hide button
}

আপনি এক লাইন এ এটি সব করতে পারেন:

$('#btnUpdate').filter(":visible").animate({ width: "toggle" });

আমি কিভাবে একটি toggled উপাদান অবস্থা নির্ধারণ করবেন?

:visible এবং :hidden নির্বাচকগুলি ব্যবহার করে আপনি কোন উপাদানটি ভেঙ্গে পড়েছেন কিনা তা নির্ধারণ করতে পারেন।

var isVisible = $('#myDiv').is(':visible');
var isHidden = $('#myDiv').is(':hidden');

আপনি যদি কেবলমাত্র তার দৃশ্যমানতার উপর ভিত্তি করে একটি উপাদানটির উপর অভিনয় করছেন তবে আপনি কেবল এতে অন্তর্ভুক্ত থাকতে পারেন :visible বা :hidden নির্বাচক অভিব্যক্তিতে :hidden । উদাহরণ স্বরূপ:

 $('#myDiv:visible').animate({left: '+=200px'}, 'slow');

এটি কাজ করতে পারে:

expect($("#message_div").css("display")).toBe("none");

if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){
    // element is hidden
}

উপরের পদ্ধতি পিতামাতার দৃশ্যমানতা বিবেচনা করে না। পিতামাতার পাশাপাশি আপনি .is(":hidden") বা .is(":visible")

উদাহরণ স্বরূপ,

<div id="div1" style="display:none">
  <div id="div2" style="display:block">Div2</div>
</div>

উপরের পদ্ধতিটি দৃশ্যমান div2 বিবেচনা করবে যখন :visible না। কিন্তু উপরের দিকটি বেশিরভাগ ক্ষেত্রেই দরকারী হতে পারে, বিশেষ করে যখন লুকানো পিতা-মাতার মধ্যে কোনও ত্রুটির ডিভিস দৃশ্যমান থাকে কিনা তা খুঁজে বের করতে হবে যেমন শর্তে :visible কাজ করবে না।


উপাদানটি UI এ দেখানো হয়েছে না তা গেজ করার জন্য দৃশ্যমানতা / প্রদর্শন বৈশিষ্ট্যগুলির জন্য একটি ফাংশন তৈরি করা যেতে পারে।

function checkUIElementVisible(element) {
    return ((element.css('display') !== 'none') && (element.css('visibility') !== 'hidden'));
}

ফীলল্ড কাজ


Adblocker জন্য দৃশ্যমান চেক ব্যবহার উদাহরণটি সক্রিয় করা হয়:

$(document).ready(function(){
  if(!$("#ablockercheck").is(":visible"))
    $("#ablockermsg").text("Please disable adblocker.").show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ad-placement" id="ablockercheck"></div>
<div id="ablockermsg" style="display: none"></div>

"ablockercheck" একটি আইডি যা adblocker ব্লক। এটি দৃশ্যমান হলে এটি পরীক্ষা করে দেখুন যদি অ্যাডব্লকার চালু থাকে তবে আপনি এটি সনাক্ত করতে পারবেন।


শুধু একটি বুলিয়ান মান জন্য চেক করে দৃশ্যমানতা চেক করুন, যেমন:

if (this.hidden === false) {
    // Your code
}

আমি প্রতিটি ফাংশন জন্য এই কোড ব্যবহার। অন্যথায় আপনি একটি উপাদান দৃশ্যমানতা চেক করার জন্য is(':visible') ব্যবহার করতে পারেন।


if($('#postcode_div').is(':visible')) {
    if($('#postcode_text').val()=='') {
        $('#spanPost').text('\u00a0');
    } else {
        $('#spanPost').text($('#postcode_text').val());
}

ক্লাস টগলিং ব্যবহার করুন, শৈলী সম্পাদনা নয়। । ।

"গোপন" উপাদানগুলির জন্য মনোনীত ক্লাসগুলি ব্যবহার করা সহজ এবং এটিও সবচেয়ে কার্যকর পদ্ধতিগুলির মধ্যে একটি। 'কোনও' এর Display শৈলী সহ 'লুকানো' শ্রেণিতে টগল করা সেই শৈলীটি সরাসরি সম্পাদনা করার চেয়ে দ্রুত সঞ্চালন করবে। আমি স্ট্যাক ওভারফ্লো প্রশ্নে বেশ সুন্দরভাবে কিছু ব্যাখ্যা করেছি একই উপাদানের দৃশ্যমান / লুকানো দুটি উপাদান চালু করা

জাভাস্ক্রিপ্ট শ্রেষ্ঠ অভ্যাস এবং অপ্টিমাইজেশান

এখানে গুগল ফ্রন্ট-এন্ড ইঞ্জিনিয়ার ইঞ্জিনিয়ার নিকোলাস জাকাসের গুগল টেক টকির সত্যিকার আলোকিত ভিডিও:


এছাড়াও উপাদানটির অবস্থা পরীক্ষা করার জন্য এবং তারপর টগল করতে একটি তাত্ক্ষণিক শর্তাধীন অভিব্যক্তি এখানে রয়েছে:

$('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); });

Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout (যেমন jQuery: দৃশ্যমান নির্বাচক হিসাবে বর্ণনা করা হয়েছে) - আমরা এই উপায়ে উপাদানটি আসলে দৃশ্যমান কিনা তা পরীক্ষা করতে পারি:

function isElementReallyHidden (el) {
    return $(el).is(":hidden") || $(el).css("visibility") == "hidden" || $(el).css('opacity') == 0;
}

var booElementReallyShowed = !isElementReallyHidden(someEl);
$(someEl).parents().each(function () {
    if (isElementReallyHidden(this)) {
        booElementReallyShowed = false;
    }
});


আরেকটি উত্তর আপনাকে বিবেচনা করা উচিত যদি আপনি কোনও উপাদান গোপন রাখেন তবে আপনাকে অবশ্যই jQuery ব্যবহার করতে হবে, তবে এটি আসলে লুকানোর পরিবর্তে, আপনি পুরো উপাদানটি সরিয়ে ফেলুন, তবে আপনি তার HTML সামগ্রী এবং ট্যাগটিকে নিজের একটি jQuery পরিবর্তনশীলতে অনুলিপি করুন এবং তারপরে যদি আপনাকে স্ক্রিনে এমন ট্যাগ থাকে তবে স্বাভাবিকভাবেই if (!$('#thetagname').length)


উদাহরণ:

$(document).ready(function() {
  if ($("#checkme:hidden").length) {
    console.log('Hidden');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="checkme" class="product" style="display:none">
  <span class="itemlist"><!-- Shows Results for Fish --></span> Category:Fish
  <br>Product: Salmon Atlantic
  <br>Specie: Salmo salar
  <br>Form: Steaks
</div>


এই প্রশ্নের কোনটিই আমি বুঝতে পারছি না যে প্রশ্নটি আমি কী বুঝি, যা আমি অনুসন্ধান করছিলাম, "আমি কীভাবে জিনিসগুলি পরিচালনা করবো যা visibility: hidden ?" । উভয় :visible না :hidden এই হ্যান্ডেল করবে, কারণ তারা উভয় ডকুমেন্টেশন প্রতি প্রদর্শনের জন্য খুঁজছেন। যতদূর আমি নির্ধারণ করতে পারি, সিএসএস দৃশ্যমানতা পরিচালনা করার জন্য কোন নির্বাচক নেই। এখানে আমি কিভাবে এটি সমাধান করেছি (স্ট্যান্ডার্ড jQuery নির্বাচকরা, আরো সংকোচিত সিনট্যাক্স হতে পারে):

$(".item").each(function() {
    if ($(this).css("visibility") == "hidden") {
        // handle non visible state
    } else {
        // handle visible state
    }
});

আপনি hidden নির্বাচক ব্যবহার করতে পারেন:

// Matches all elements that are hidden
$('element:hidden')

এবং visible নির্বাচক:

// Matches all elements that are visible
$('element:visible')

যেহেতু প্রশ্নটি একটি একক উপাদান বোঝায়, এই কোডটি আরও উপযুক্ত হতে পারে:

// Checks css for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible"); 

// The same works with hidden
$(element).is(":hidden"); 

Twernt এর পরামর্শ হিসাবে একই, কিন্তু একটি একক উপাদান প্রয়োগ; এবং এটি jQuery FAQ এ প্রস্তাবিত অ্যালগরিদম মিলেছে


আমি সিএসএস ক্লাস ব্যবহার .hide { display: none!important; } .hide { display: none!important; }

লুকানোর জন্য / দেখানোর জন্য, আমি .addClass("hide")/.removeClass("hide") । দৃশ্যমানতা পরীক্ষা করার জন্য, আমি .hasClass("hide") ব্যবহার .hasClass("hide")

যদি আপনি .toggle() বা .animate() পদ্ধতিগুলি ব্যবহার করার পরিকল্পনা না করেন তবে এটি উপাদানগুলি পরীক্ষা / লুকান / দেখানোর একটি সহজ এবং পরিষ্কার উপায়।


যখন কোনও উপাদান পরীক্ষা করা হয় :hidden jQuery এ :hidden নির্বাচক এটি বিবেচনা করা উচিত যে একটি পরম অবস্থানের উপাদান লুকানো হিসাবে স্বীকৃত হতে পারে যদিও তার সন্তানের উপাদান দৃশ্যমান

এটি প্রথমদিকে কিছুটা পাল্টা-স্বজ্ঞাত মনে হচ্ছে - যদিও jQuery ডকুমেন্টেশনের ঘনিষ্ঠ দৃষ্টিভঙ্গি প্রাসঙ্গিক তথ্য দেয়:

উপাদানগুলিকে বিভিন্ন কারণে লুকানো বলে মনে করা যেতে পারে: [...] তাদের প্রস্থ এবং উচ্চতা স্পষ্টভাবে 0 এ সেট করা হয় [...]

সুতরাং এই আসলে বক্স মডেল এবং উপাদান জন্য গণিত শৈলী সম্পর্কে জ্ঞান করে তোলে। এমনকি যদি প্রস্থ এবং উচ্চতাটি স্পষ্টভাবে 0 তে সেট না থাকে তবে সেগুলি নিখুঁতভাবে সেট করা যেতে পারে।

নিচের উদাহরণটি দেখুন:

console.log($('.foo').is(':hidden')); // true
console.log($('.bar').is(':hidden')); // false
.foo {
  position: absolute;
  left: 10px;
  top: 10px;
  background: #ff0000;
}

.bar {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 20px;
  height: 20px;
  background: #0000ff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo">
  <div class="bar"></div>
</div>

JQUERY 3.x জন্য আপডেট করুন:

JQuery 3 সঙ্গে বর্ণিত আচরণ পরিবর্তন হবে! যদি শূন্য প্রস্থ এবং / অথবা উচ্চতা সহ কোনও বিন্যাস বাক্স থাকে তবে উপাদানগুলিকে দৃশ্যমান বলে মনে করা হবে।

JQuery 3.0.0-alpha1 সহ JSFiddle:

http://jsfiddle.net/pM2q3/7/

একই জেএস তারপর এই আউটপুট আছে হবে:

console.log($('.foo').is(':hidden')); // false
console.log($('.bar').is(':hidden')); // false

এটি আমার জন্য কাজ করে, এবং আমি আমার ডিভ লুকানো / দৃশ্যমান করতে show() এবং hide() লুকিয়েছি:

if( $(this).css('display') == 'none' ){
    /* your code goes here */
} else {
    /* alternate logic   */
}




visibility