jQuery `.is (": দৃশ্যমান ") Chrome ক্রোমে কাজ করছে না

Question

if ($("#makespan").is(":visible") == true) { 
    var make = $("#make").val(); 
}
else {
    var make = $("#othermake").val(); 
}

Make:<span id=makespan><select id=make></select><span id=othermakebutton class=txtbutton>Other?</span></span><span id=othermakespan style="display: none;"><input type=text name=othermake id=othermake>&nbsp;-&nbsp;<span id=othermakecancel class=txtbutton>Cancel</span></span>

উপরের কোডটি ফায়ারফক্সে মসৃণভাবে চালিত হয় তবে এটি ক্রোমে কাজ করে বলে মনে হয় না। Chrome এ এটি থাকা অবস্থায়ও প্রদর্শিত .is(":visible") = falseহয় true।

আমি নিম্নলিখিত jQuery সংস্করণ ব্যবহার করছি: jquery-1.4.3.min.js

জেএসফিডাল লিংক: http://jsfiddle.net/WJU2r/4/

Comments

সম্ভবত একটি jsfiddle লিঙ্কে? এবং সম্ভবত এটি jquery.latest দিয়ে পরীক্ষা করুন।

— xaxxon

ম্যাকস্প্যানটি প্রদর্শিত হতে পারে: না, বা দৃশ্যমানতা: লুকানো নেই?

— আর্তুর কেয়ান

এবং সাময়িকভাবে সাম্প্রতিকতম jQuery সংস্করণে আপডেট করুন, কেবল একটি jQuery বাগটি বাতিল করতে?

— স্ট্রলোক

এছাড়াও দেখুন: bugs.jquery.com/ticket/13132 মনে হয় এটি সংস্করণ 1.12 / 2.2 এ ঠিক করা হবে! -

— গ্লেন লিটল

enougth: যদি ()। $ ( "# makespan") আছে ( ": দৃশ্যমান") যদি বিবৃতি লিখছি মধ্যে "== সত্য" যোগ করার প্রয়োজন হবে না

— marcdahan

Answer 1

দেখে মনে হচ্ছে jQuery এর :visibleনির্বাচক Chrome এ কিছু ইনলাইন উপাদানগুলির জন্য কাজ করে না। সমাধানটি হ'ল একটি প্রদর্শন শৈলী যুক্ত করা, পছন্দ করা "block"বা "inline-block"এটি কাজ করা।

এছাড়াও নোট করুন যে jQuery এর অনেকগুলি বিকাশকারীদের তুলনায় যা দৃশ্যমান তার কিছুটা আলাদা সংজ্ঞা রয়েছে:

উপাদানগুলি দস্তাবেজটিতে স্থান গ্রহন করে তা দৃশ্যমান হিসাবে বিবেচিত হয়।
দৃশ্যমান উপাদানগুলির একটি প্রস্থ বা উচ্চতা শূন্যের চেয়ে বড়।

অন্য কথায়, একটি উপাদান অবশ্যই স্থান গ্রহন করতে এবং দৃশ্যমান হওয়ার জন্য একটি শূন্য-প্রস্থ এবং উচ্চতা থাকতে হবে।

উপাদানগুলি এগুলির সাথে দৃশ্যমান visibility: hiddenবা opacity: 0বিবেচিত বলে বিবেচিত হয়, যেহেতু তারা এখনও লেআউটে স্থান গ্রাস করে।

অন্যদিকে , এটিতে visibilityসেট করা থাকলে hiddenবা অস্বচ্ছতা শূন্য থাকলেও, এটি :visibleজায়গাগুলি গ্রহণ করার সাথে সাথে এটি এখনও jQuery এর মতো, যখন সিএসএস স্পষ্টভাবে বলে দেয় যে এর দৃশ্যমানতা লুকানো আছে conf

যে কোনও উপাদান নথিতে নেই তা গোপন হিসাবে বিবেচিত হয়; jQuery কোনও নথিতে যুক্ত হওয়ার পরে সেগুলি দৃশ্যমান হবে কিনা তা জানার উপায় নেই কারণ এটি প্রযোজ্য শৈলীর উপর নির্ভর করে।

সমস্ত বিকল্প উপাদানগুলি তাদের নির্বাচিত রাষ্ট্র নির্বিশেষে গোপন হিসাবে বিবেচনা করা হয়।

অ্যানিমেশনগুলির সময় যা কোনও উপাদানকে আড়াল করে, অ্যানিমেশনটির শেষ পর্যন্ত উপাদানটি দৃশ্যমান বলে বিবেচিত হয়। কোনও উপাদান দেখানোর জন্য অ্যানিমেশনগুলির সময় অ্যানিমেশনটির শুরুতে উপাদানটি দৃশ্যমান হিসাবে বিবেচিত হয়।

এটি দেখার সহজ উপায় হ'ল এটি হল যে আপনি যদি পর্দায় উপাদানটি দেখতে পান, এমনকি যদি আপনি এর সামগ্রী দেখতে না পান তবে এটি স্বচ্ছ ইত্যাদি it's এটি দৃশ্যমান, অর্থাৎ এটি স্থান গ্রহণ করে।

আমি আপনার মার্কআপটি কিছুটা পরিষ্কার করে একটি প্রদর্শন শৈলী যুক্ত করেছি ( যেমন উপাদানগুলি "ব্লক" ইত্যাদিতে সেট করে ) এবং এটি আমার পক্ষে কাজ করে:

বেহালা

এর জন্য অফিসিয়াল এপিআই রেফারেন্স :visible

---

JQuery 3 হিসাবে, এর সংজ্ঞাটি :visibleকিছুটা পরিবর্তিত হয়েছে

jQuery 3 সামান্য অর্থ :visible(এবং তাই :hidden) এর অর্থ সংশোধন করে ।
এই সংস্করণটি দিয়ে শুরু করে উপাদানগুলির :visibleশূন্য প্রস্থ এবং / বা উচ্চতা সহ কোনও লেআউট বাক্স রয়েছে কিনা তা বিবেচনা করা হবে । উদাহরণস্বরূপ, brউপাদানগুলির সাথে কোনও সামগ্রী না থাকা উপাদানগুলি এবং ইনলাইন উপাদানগুলি :visibleনির্বাচক দ্বারা নির্বাচিত হবে ।

Comments

আমি জেএসফিডে পৃথক উপাদানগুলিও আটকানোর চেষ্টা করেছি এবং এটি দুর্দান্ত কাজ করেছে। আমি jsFizz এ ত্রুটিটি প্রতিলিপি করার চেষ্টা করব এবং তারপরে লিঙ্কটি পোস্ট করব। সম্ভবত কোডটিতে অন্য কোনও কারণ এই ত্রুটি ঘটাচ্ছে

— সাদ বশির

সমস্যাটি আমি নীচের লিঙ্কটিতে প্রতিলিপি করেছি: jsfiddle.net/WJU2r/3

— সাদ বশির

ধন্যবাদ যে অনেক কাজ! আমি কেন জানি না তবে # মেকস্প্যান {ডিসপ্লে সেট করছি: ব্লক; it এটি কাজ করে।

— সাদ বশির 4

মূল পোস্টার থেকে দেওয়া মন্তব্যটিতে আপনার স্প্যানগুলি প্রদর্শন: ব্লক করে আসল সমাধান, আইই রয়েছে। নির্বোধ যে স্প্যানগুলি ক্রোমে ডিফল্টরূপে অদৃশ্য, তবে যাই হোক না কেন।

— জেফ ডেভিস

আপনি যদি & nbsp যোগ করেন তবে ধারণা করা হয়; উপাদানটিতে, কারণ যদি কোনও উপাদানের কোনও বিষয়বস্তু না থাকে তবে তা ক্রোমে অদৃশ্য

— ব্রিগেণ্টি

Answer 2

আমি জানি না কেন আপনার কোড ক্রোমে কাজ করে না, তবে আমি আপনাকে কিছু কাজের ক্ষেত্র ব্যবহার করার পরামর্শ দিচ্ছি:

$el.is(':visible') === $el.is(':not(:hidden)');

অথবা

$el.is(':visible') === !$el.is(':hidden');  

আপনি যদি নিশ্চিত হন যে jQuery আপনাকে ক্রোমে কিছু খারাপ ফলাফল দেয় তবে আপনি কেবলমাত্র CSS বিধি পরীক্ষার উপর নির্ভর করতে পারেন:

if($el.css('display') !== 'none') {
    // i'm visible
}

এছাড়াও, আপনি সর্বশেষতম jQuery ব্যবহার করতে চাইতে পারেন কারণ এতে পুরানো সংস্করণ থেকে বাগগুলি স্থির থাকতে পারে।

Comments

সমস্যাটি আমি নীচের লিঙ্কটিতে প্রতিলিপি করেছি: jsfiddle.net/WJU2r/3

— সাদ বশির

এই প্রশ্নের বিস্তারিত কি পার্থক্য মধ্যে :hiddenএবং :not(:visible)। stackoverflow.com/questions/17425543/…

— মার্ক স্কুলথিস

ফাংশনটি (': দৃশ্যমান') বা .is (': লুকানো') বা এটি (': নয় (: লুকানো)') পারফরম্যান্সের পক্ষে খুব খারাপ

— ডায়োগো সিড

Answer 3

একটি অদ্ভুত কেস আছে যেখানে উপাদানটি যদি display: inlineদৃশ্যমানতার জন্য jQuery চেক সেট করা থাকে তবে ব্যর্থ হয়।

উদাহরণ:

সিএসএস

#myspan {display: inline;}

jQuery এর

$('#myspan').show(); // Our element is `inline` instead of `block`
$('#myspan').is(":visible"); // This is false

এটি ঠিক করতে আপনি jQuery এবং তুলনায় উপাদান লুকিয়ে রাখতে পারেন show/hideবা toggle()জরিমানা কাজ করা উচিত।

$('#myspan').hide()
$('#otherElement').on('click', function() {
    $('#myspan').toggle();
});

Comments

ফ্যান্টমজেএস নিয়ে আমার এই সমস্যা হচ্ছে তবে Chrome এ 47.0.2526 এ কাজ করছে বলে মনে হচ্ছে। দেখুন: jsfiddle.net/k4b925gn/2

— এক্কিস

Answer 4

আমি ধরে নিয়েছি এটির আমাদের এইচটিএমএলটিতে একটি ছদ্মবেশের সাথে কিছু করার আছে কারণ একই পৃষ্ঠার অন্যান্য জায়গাগুলি ঠিকঠাক কাজ করে।

আমি এই সমস্যাটি সমাধান করার একমাত্র উপায় হ'ল:

if($('#element_id').css('display') == 'none')
{
   // Take element is hidden action
}
else
{
   // Take element is visible action
}

Answer 5

যদি আপনি jquery ডক্সটি পড়েন, তবে কোনও কিছুকে দৃশ্যমান / লুকানো হিসাবে বিবেচনা না করার জন্য অনেকগুলি কারণ রয়েছে:

তাদের কোনওটির সিএসএস প্রদর্শনের মান নেই।

এগুলি = "লুকানো" টাইপযুক্ত ফর্ম উপাদান।

তাদের প্রস্থ এবং উচ্চতা সুস্পষ্টভাবে 0 এ সেট করা আছে।

একটি পূর্বপুরুষের উপাদান লুকানো আছে, সুতরাং উপাদানটি পৃষ্ঠাতে প্রদর্শিত হয়নি।

http://api.jquery.com/visible-selector/

এখানে একটি দৃশ্যমান এবং একটি লুকানো উপাদান সহ একটি ছোট jsfiddle উদাহরণ রয়েছে:

http://jsfiddle.net/tNjLb/

Comments

সমস্যাটি আমি নীচের লিঙ্কটিতে প্রতিলিপি করেছি: jsfiddle.net/WJU2r/3

— সাদ বশির

Answer 6

ইন্টারনেট এক্সপ্লোরার, ক্রোম, ফায়ারফক্স ...

ক্রস ব্রাউজার ফাংশন "isis" (দৃশ্যমান) () "

//check if exist and is visible
function isVisible(id) {
    var element = $('#' + id);
    if (element.length > 0 && element.css('visibility') !== 'hidden' && element.css('display') !== 'none') {
        return true;
    } else {
        return false;
    }
}

সম্পূর্ণ উদাহরণ:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script type="text/javascript">
            //check if exist and is visible
            function isVisible(id) {
                var element = $('#' + id);
                if (element.length > 0 && element.css('visibility') !== 'hidden' && element.css('display') !== 'none') {
                    return true;
                } else {
                    return false;
                }
            }

            function check(id) {
                if (isVisible(id)) {
                    alert('visible: true');
                } else {
                    alert('visible: false');
                }
                return false;
            }
        </script>

        <style type="text/css">
            #fullname{
                display: none;
            }
            #vote{
                visibility: hidden;
            }
        </style>
        <title>Full example: isVisible function</title>
    </head>
    <body>
        <div id="hello-world">
            Hello World!
        </div>
        <div id="fullname">
            Fernando Mosquera Catarecha
        </div>
        <div id="vote">
            rate it!
        </div>
        <a href="#" onclick="check('hello-world');">Check isVisible('hello-world')</a><br /><br />
        <a href="#" onclick="check('fullname');">Check isVisible('fullname')</a><br /><br />
        <a href="#" onclick="check('vote');">Check isVisible('vote')</a>
    </body>
</html>

শুভেচ্ছা সহ,

ফার্নান্দো

Answer 7

সাধারণত আমার এই পরিস্থিতিটি বেঁচে থাকে যখন আমার অবজেক্টের পিতা-মাতা লুকিয়ে থাকে। উদাহরণস্বরূপ যখন এইচটিএমএল এর মত হয়:

    <div class="div-parent" style="display:none">
        <div class="div-child" style="display:block">
        </div>
    </div>

যদি আপনি জিজ্ঞাসা করেন যে সন্তানের মতো দৃশ্যমান কিনা:

    $(".div-child").is(":visible");

এটি মিথ্যা প্রত্যাবর্তন করবে কারণ এর পিতামাতাকে দৃশ্যমান নয় যাতে ডিভটিও দৃশ্যমান হয় না।

Comments

আমার সমাধানটি কম দেখুন ... আপনার সন্তানের 'উত্তরাধিকার সূত্রে' প্রদর্শন করার জন্য, এটি তার পিতামত্তা আইটেম থেকে রাষ্ট্রটি অনুলিপি করবে, সুতরাং যদি এটি লুকানো থাকে তবে এলেমটন.ইস (": লুকানো") কাজ করবে

— প্যাট্রিক

Answer 8

কোনও উপাদান দৃশ্যমান কিনা তা নির্ধারণের জন্য একটি ক্রস ব্রাউজার / সংস্করণ সমাধান হ'ল প্রদর্শন / লুকানোর উপাদানটিতে একটি CSS শ্রেণি যুক্ত / সরানো। উপাদানটির ডিফল্ট (দৃশ্যমান) অবস্থা উদাহরণস্বরূপ হতে পারে:

<span id="span1" class="visible">Span text</span>

তারপরে লুকানোর পরে, ক্লাসটি সরান:

$("#span1").removeClass("visible").hide();

শো চলাকালীন, এটি আবার যুক্ত করুন:

$("#span1").addClass("visible").show();

তারপরে উপাদানটি দৃশ্যমান কিনা তা নির্ধারণ করতে এটি ব্যবহার করুন:

if ($("#span1").hasClass("visible")) { // do something }

এটি পারফরম্যান্সের প্রভাবগুলিও সমাধান করে, যা ": দৃশ্যমান" নির্বাচকের ভারী ব্যবহারের ক্ষেত্রে ঘটতে পারে, যা jQuery এর ডকুমেন্টেশনে নির্দেশিত:

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

": দৃশ্যমান" নির্বাচকটির জন্য অফিসিয়াল jQuery এপিআই ডকুমেন্টেশন

Answer 9

আমি পিতামাতার উপর পরবর্তী স্টাইল যুক্ত করেছি এবং .is (": দৃশ্যমান") কাজ করেছেন।

প্রদর্শন: ইনলাইন-ব্লক;

Answer 10

যদি কোনও আইটেম লুকানো থাকে এমন আইটেমের সন্তান হয় (": দৃশ্যমান") সত্য ফিরে আসবে, যা ভুল।

আমি কেবলমাত্র শিশু আইটেমটিতে "প্রদর্শন: উত্তরাধিকারী" যুক্ত করে এটি ঠিক করেছি। এটি আমার জন্য এটি স্থির করবে:

<div class="parent">
   <div class="child">
   </div>
<div>

এবং সিএসএস:

.parent{
   display: hidden;
}
.child{
   display: inherit;
}

এখন পিতামাতার দৃশ্যমানতা পরিবর্তন করে আইটেমটি কার্যকরভাবে চালু এবং বন্ধ করা যাবে এবং $ (উপাদান) .আই (": দৃশ্যমান") পিতামাতার আইটেমটির দৃশ্যমানতা ফিরিয়ে দেবে

Answer 11

এটি jquery.js এর কোডের অংশ যা (": দৃশ্যমান") বলা হয় তখন সম্পাদন করে:

if (jQuery.expr && jQuery.expr.filters){

    jQuery.expr.filters.hidden = function( elem ) {
        return ( elem.offsetWidth === 0 && elem.offsetHeight === 0 ) || (!jQuery.support.reliableHiddenOffsets && ((elem.style && elem.style.display) || jQuery.css( elem, "display" )) === "none");
    };

    jQuery.expr.filters.visible = function( elem ) {
        return !jQuery.expr.filters.hidden( elem );
    };
}

আপনি দেখতে পাচ্ছেন, এটি কেবলমাত্র সিএসএস প্রদর্শন বৈশিষ্ট্যের চেয়ে বেশি ব্যবহার করে। এটি উপাদানটির প্রস্থ এবং প্রস্থের উপরেও নির্ভর করে। সুতরাং, উপাদানটির কিছু প্রস্থ এবং উচ্চতা রয়েছে তা নিশ্চিত করুন। এবং এটি করার জন্য, আপনাকে ডিসপ্লে সম্পত্তি সেট করতে হবে "inline-block"বা করতে হবে "block"

Answer 12

আমার দৃশ্যমানতাটি ব্যবহার করতে হবে : ডিসপ্লেতে লুকানো অন্তর্নিহিত : কিছুই নয় কারণ দৃশ্যমানতা ইভেন্টগুলি নেয়, যখন প্রদর্শন হয় না।

তাই আমি করি .attr('visibility') === "visible"