jQuery `.is (“: มองเห็นได้”)` ไม่ทำงานใน Chrome

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>

โค้ดด้านบนทำงานได้อย่างราบรื่นใน Firefox แต่ดูเหมือนจะไม่ทำงานใน Chrome ใน Chrome มันแสดงให้เห็นแม้ในขณะที่มันเป็น.is(":visible") = falsetrue

ฉันใช้ jQuery เวอร์ชันต่อไปนี้: jquery-1.4.3.min.js

ลิงก์ jsFiddle: http://jsfiddle.net/WJU2r/4/

ดูเหมือนว่า:visibleตัวเลือกของ jQuery ไม่ทำงานสำหรับองค์ประกอบแบบอินไลน์ใน Chrome การแก้ปัญหาคือการเพิ่มสไตล์การแสดงผลเช่น"block"หรือ"inline-block"เพื่อให้มันทำงาน

นอกจากนี้โปรดทราบว่า jQuery มีคำจำกัดความที่แตกต่างกันเล็กน้อยเกี่ยวกับสิ่งที่มองเห็นได้จากผู้พัฒนาหลายราย

องค์ประกอบต่างๆจะถูกมองเห็นหากใช้พื้นที่ในเอกสาร
องค์ประกอบที่มองเห็นได้มีความกว้างหรือความสูงที่มากกว่าศูนย์

กล่าวอีกนัยหนึ่งองค์ประกอบจะต้องมีความกว้างและความสูงไม่เป็นศูนย์เพื่อใช้พื้นที่และสามารถมองเห็นได้

องค์ประกอบที่มีvisibility: hiddenหรือopacity: 0ถือว่ามองเห็นได้เนื่องจากยังคงใช้พื้นที่ในเค้าโครง

ในทางตรงกันข้ามแม้ว่ามันvisibilityจะถูกตั้งค่าเป็นhiddenหรือความทึบเป็นศูนย์ก็ยังคง:visibleเป็น jQuery ในขณะที่มันใช้พื้นที่ซึ่งอาจทำให้เกิดความสับสนเมื่อ CSS บอกอย่างชัดเจนว่าการมองเห็นของมันถูกซ่อนอยู่

องค์ประกอบที่ไม่ได้อยู่ในเอกสารจะถูกซ่อน jQuery ไม่มีวิธีที่จะทราบว่าจะสามารถมองเห็นได้เมื่อผนวกเข้ากับเอกสารหรือไม่เนื่องจากขึ้นอยู่กับสไตล์ที่ใช้

องค์ประกอบตัวเลือกทั้งหมดถูกพิจารณาว่าซ่อนอยู่โดยไม่คำนึงถึงสถานะที่เลือกไว้

ระหว่างภาพเคลื่อนไหวที่ซ่อนองค์ประกอบองค์ประกอบนั้นจะถูกมองเห็นได้จนกว่าจะสิ้นสุดของภาพเคลื่อนไหว ในระหว่างที่แอนิเมชันเพื่อแสดงองค์ประกอบอิลิเมนต์นั้นจะมองเห็นได้ตั้งแต่เริ่มต้นของการเคลื่อนไหว

วิธีง่าย ๆ ในการดูคือถ้าคุณสามารถเห็นองค์ประกอบบนหน้าจอแม้ว่าคุณจะไม่สามารถมองเห็นเนื้อหาของมันมันโปร่งใส ฯลฯ ก็สามารถมองเห็นได้เช่นใช้พื้นที่ว่าง

ฉันล้างมาร์กอัปของคุณเล็กน้อยและเพิ่มสไตล์การแสดงผล ( เช่นการตั้งค่าองค์ประกอบที่แสดงเป็น "บล็อก" ฯลฯ ) และสิ่งนี้ใช้งานได้สำหรับฉัน:

ซอ

API อ้างอิงอย่างเป็นทางการสำหรับ :visible

ตั้งแต่ jQuery 3 คำจำกัดความของ:visibleเปลี่ยนไปเล็กน้อย

jQuery 3 ปรับเปลี่ยนความหมายเล็กน้อย:visible(และดังนั้น :hidden)
เริ่มต้นด้วยรุ่นนี้องค์ประกอบจะได้รับการพิจารณา:visibleหากมีเค้าโครงกล่องใด ๆ รวมถึงองค์ประกอบที่มี ความกว้างเป็นศูนย์และ / หรือความสูง ตัวอย่างเช่นbrองค์ประกอบและองค์ประกอบแบบอินไลน์ที่ไม่มีเนื้อหาจะถูกเลือกโดย:visibleตัวเลือก

ฉันไม่รู้ว่าทำไมรหัสของคุณใช้งานไม่ได้กับ Chrome แต่ฉันขอแนะนำให้คุณใช้วิธีแก้ปัญหาบางอย่าง:

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

หรือ

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

หากคุณมั่นใจว่า jQuery ให้ผลลัพธ์ที่ไม่ดีใน Chrome คุณสามารถพึ่งพาการตรวจสอบกฎ css:

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

นอกจากนี้คุณอาจต้องการใช้jQuery ล่าสุดเนื่องจากอาจมีข้อบกพร่องจากรุ่นเก่ากว่าได้รับการแก้ไข

มีกรณีแปลก ๆ ที่หากองค์ประกอบถูกตั้งค่าdisplay: inlineเป็น jQuery ตรวจสอบการมองเห็นล้มเหลว

ตัวอย่าง:

CSS

#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();
});

ฉันคิดว่ามันมีบางอย่างเกี่ยวกับการเล่นโวหารใน HTML ของเราเพราะสถานที่อื่น ๆ ในหน้าเดียวกันทำงานได้ดี

วิธีเดียวที่ฉันสามารถแก้ไขปัญหานี้ได้คือ:

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

หากคุณอ่านเอกสาร jquery มีหลายเหตุผลที่บางสิ่งบางอย่างที่จะไม่ถูกมองเห็น / ซ่อนอยู่:

พวกเขามีค่าการแสดงผล CSS เป็น none

พวกมันคือองค์ประกอบของฟอร์มที่มี type = "hidden"

ความกว้างและความสูงของพวกเขาถูกตั้งค่าเป็น 0 อย่างชัดเจน

องค์ประกอบบรรพบุรุษถูกซ่อนดังนั้นองค์ประกอบจะไม่ปรากฏในหน้า

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

นี่คือตัวอย่าง jsfiddle ขนาดเล็กที่มีองค์ประกอบที่มองเห็นได้หนึ่งองค์ประกอบ

http://jsfiddle.net/tNjLb/

Internet Explorer, Chrome, Firefox ...

ฟังก์ชั่น Cross Browser "isVisible ()"

//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>

ความนับถือ,

เฟอร์นันโด

โดยทั่วไปแล้วฉันใช้ชีวิตแบบนี้เมื่อผู้ปกครองของวัตถุของฉันถูกซ่อน เช่นเมื่อ html เป็นเช่นนี้:

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

ถ้าคุณถามว่าเด็กสามารถมองเห็นเช่น:

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

มันจะส่งคืนค่าเท็จเนื่องจากพาเรนต์ไม่สามารถมองเห็นได้ดังนั้น div จะไม่สามารถมองเห็นได้เช่นกัน

cross browser / version solution เพื่อตรวจสอบว่าองค์ประกอบสามารถมองเห็นได้หรือไม่คือการเพิ่ม / ลบคลาส 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 API อย่างเป็นทางการสำหรับตัวเลือก ": มองเห็นได้"

ฉันเพิ่มสไตล์ถัดไปในแม่และทำงานเป็น. is (": visible")

จอแสดงผล: บล็อกแบบอินไลน์;

หากรายการนั้นเป็นรายการย่อยของรายการที่ถูกซ่อนไว้คือ (": มองเห็นได้") จะส่งคืนจริงซึ่งไม่ถูกต้อง

ฉันเพิ่งแก้ไขโดยเพิ่ม "display: inherit" ในรายการย่อย สิ่งนี้จะแก้ไขให้ฉัน:

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

และ CSS:

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

ขณะนี้สามารถเปิดและปิดรายการได้อย่างมีประสิทธิภาพโดยการเปลี่ยนการเปิดเผยของพาเรนต์และ $ (องค์ประกอบ) .is (": มองเห็นได้") จะส่งคืนการมองเห็นของรายการหลัก

นี่คือส่วนหนึ่งของรหัสจาก jquery.js ซึ่งเรียกใช้งานเมื่อคือ (": visible") เรียกว่า:

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

อย่างที่คุณเห็นมันใช้มากกว่าคุณสมบัติการแสดง CSS นอกจากนี้ยังขึ้นอยู่กับความกว้างและความสูงของเนื้อหาขององค์ประกอบ ดังนั้นตรวจสอบให้แน่ใจว่าองค์ประกอบมีความกว้างและความสูง และสำหรับการทำเช่นนี้คุณอาจต้องตั้งค่าคุณสมบัติการแสดงผลเป็น"inline-block"หรือ "block"

ฉันต้องการใช้การมองเห็น: ซ่อนการแสดงผลไว้: ไม่มีเพราะการมองเห็นใช้เวลาเหตุการณ์ขณะที่จอแสดงผลไม่

ดังนั้นฉันทำ .attr('visibility') === "visible"