jQuery `.is (Phiên bản: có thể nhìn thấy)` không hoạt động trong 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>

Đoạn mã trên chạy trơn tru trong Firefox, nhưng dường như không hoạt động trong Chrome. Trong Chrome, nó hiển thị .is(":visible") = falsengay cả khi có true.

Tôi đang sử dụng phiên bản jQuery sau: jquery-1.4.3.min.js

Liên kết jsFiddle: http://jsfiddle.net/WJU2r/4/

Có vẻ như :visiblebộ chọn của jQuery không hoạt động đối với một số thành phần nội tuyến trong Chrome. Giải pháp là thêm một kiểu hiển thị, thích "block"hoặc "inline-block"làm cho nó hoạt động.

Cũng lưu ý rằng jQuery có một định nghĩa hơi khác về những gì có thể nhìn thấy so với nhiều nhà phát triển:

Các yếu tố được coi là có thể nhìn thấy nếu chúng tiêu thụ không gian trong tài liệu.
Các yếu tố hữu hình có chiều rộng hoặc chiều cao lớn hơn 0.

Nói cách khác, một phần tử phải có chiều rộng và chiều cao khác không để tiêu thụ không gian và có thể nhìn thấy được.

Các yếu tố có visibility: hiddenhoặc opacity: 0được coi là có thể nhìn thấy, vì chúng vẫn tiêu tốn không gian trong bố cục.

Mặt khác, ngay cả khi nó visibilityđược đặt thành hiddenhoặc độ mờ bằng 0, nó vẫn :visiblelà jQuery vì nó tiêu tốn dung lượng, điều này có thể gây nhầm lẫn khi CSS nói rõ ràng khả năng hiển thị của nó bị ẩn.

Các yếu tố không có trong tài liệu được coi là ẩn; jQuery không có cách nào để biết liệu chúng có hiển thị khi được thêm vào tài liệu hay không vì nó phụ thuộc vào các kiểu áp dụng.

Tất cả các yếu tố tùy chọn được coi là ẩn, bất kể trạng thái đã chọn của chúng.

Trong các hình ảnh động ẩn một phần tử, phần tử được coi là hiển thị cho đến khi kết thúc hình ảnh động. Trong hình ảnh động để hiển thị một phần tử, phần tử được coi là hiển thị khi bắt đầu tại hình động.

Cách dễ dàng để xem xét nó là, nếu bạn có thể nhìn thấy phần tử trên màn hình, ngay cả khi bạn không thể nhìn thấy nội dung của nó, nó trong suốt, v.v., nó hiển thị, tức là nó chiếm không gian.

Tôi đã dọn dẹp đánh dấu của bạn một chút và thêm một kiểu hiển thị ( nghĩa là đặt các phần tử hiển thị thành "chặn", v.v. ) và điều này hoạt động với tôi:

VĨ CẦM

Tham chiếu API chính thức cho :visible

Kể từ jQuery 3, định nghĩa :visibleđã thay đổi một chút

jQuery 3 sửa đổi một chút ý nghĩa của :visible(và do đó :hidden).
Bắt đầu với phiên bản này, các yếu tố sẽ được xem xét :visiblenếu chúng có bất kỳ hộp bố trí nào, bao gồm cả các hộp có chiều rộng và / hoặc chiều cao bằng không. Ví dụ: brcác phần tử và phần tử nội tuyến không có nội dung sẽ được chọn bởi :visiblebộ chọn.

Tôi không biết tại sao mã của bạn không hoạt động trên chrome, nhưng tôi khuyên bạn nên sử dụng một số cách giải quyết:

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

hoặc là

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

Nếu bạn chắc chắn rằng jQuery cung cấp cho bạn một số kết quả xấu trong chrome, bạn chỉ có thể dựa vào kiểm tra quy tắc css:

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

Thêm vào đó, bạn có thể muốn sử dụng jQuery mới nhất vì nó có thể có lỗi từ phiên bản cũ hơn.

Có một trường hợp kỳ lạ nếu phần tử được đặt thành display: inline kiểm tra jQuery cho khả năng hiển thị không thành công.

Thí dụ:

CSS

#myspan {display: inline;}

jQuery

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

Để khắc phục nó, bạn có thể ẩn các yếu tố trong jQuery và hơn show/hidehoặc toggle()sẽ làm việc tốt.

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

Tôi cho rằng nó có liên quan đến một vấn đề trong HTML của chúng tôi bởi vì những nơi khác trên cùng một trang hoạt động tốt.

Cách duy nhất tôi có thể giải quyết vấn đề này là làm:

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

Nếu bạn đọc các tài liệu jquery, có nhiều lý do để một cái gì đó không được coi là hiển thị / ẩn:

Chúng có giá trị hiển thị CSS là không có.

Chúng là các thành phần hình thức với type = "hidden".

Chiều rộng và chiều cao của chúng được đặt rõ ràng là 0.

Một phần tử tổ tiên bị ẩn, vì vậy phần tử không được hiển thị trên trang.

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

Đây là một ví dụ jsfiddle nhỏ với một yếu tố hiển thị và một yếu tố ẩn:

http://jsfiddle.net/tNjLb/

Internet Explorer, Chrome, Firefox ...

Chức năng trình duyệt chéo "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;
    }
}

Ví dụ đầy đủ:

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

Trân trọng,

Fernando

Nói chung tôi sống tình huống này khi cha mẹ của đối tượng của tôi bị ẩn. ví dụ khi html như thế này:

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

nếu bạn hỏi nếu trẻ em được nhìn thấy như:

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

nó sẽ trả về false vì cha của nó không hiển thị để div cũng không hiển thị.

Một giải pháp phiên bản / trình duyệt chéo để xác định xem một phần tử có hiển thị hay không, là thêm / xóa một lớp css cho phần tử được hiển thị / ẩn. Trạng thái (hiển thị) mặc định của phần tử có thể là ví dụ như sau:

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

Sau đó vào ẩn, xóa lớp:

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

Trong chương trình, thêm nó một lần nữa:

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

Sau đó, để xác định xem phần tử có thể nhìn thấy hay không, sử dụng phần này:

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

Điều này cũng giải quyết các hàm ý hiệu năng, có thể xảy ra khi sử dụng nhiều bộ chọn ": thấy", được chỉ ra trong tài liệu của jQuery:

Sử dụng bộ chọn này rất nhiều có thể có ý nghĩa về hiệu suất, vì nó có thể buộc trình duyệt hiển thị lại trang trước khi có thể xác định mức độ hiển thị. Theo dõi khả năng hiển thị của các phần tử thông qua các phương thức khác, ví dụ sử dụng một lớp, có thể cung cấp hiệu suất tốt hơn.

Tài liệu API jQuery chính thức cho bộ chọn ": thấy"

Tôi đã thêm kiểu tiếp theo trên cha mẹ và .is (": thấy") hoạt động.

hiển thị: khối nội tuyến;

Nếu một mục là con của một mục bị ẩn là (": nhìn thấy") sẽ trả về đúng, điều này không chính xác.

Tôi chỉ sửa lỗi này bằng cách thêm "display: inherit" vào mục con. Điều này sẽ sửa nó cho tôi:

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

và CSS:

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

Bây giờ, mục này có thể được bật và tắt một cách hiệu quả bằng cách thay đổi mức độ hiển thị của cha mẹ và $ (phần tử) .is (": thấy") sẽ trả về khả năng hiển thị của mục cha

Đây là đoạn mã từ jquery.js thực thi khi được gọi là (": thấy"):

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

Như bạn có thể thấy, nó sử dụng nhiều hơn chỉ thuộc tính hiển thị CSS. Nó cũng phụ thuộc vào chiều rộng và chiều cao của nội dung của phần tử. Do đó, đảm bảo phần tử có chiều rộng và chiều cao. Và để làm điều này, bạn có thể cần phải đặt thuộc tính hiển thị thành "inline-block"hoặc "block"

Tôi cần sử dụng khả năng hiển thị: ẩn insted của màn hình: không có vì khả năng hiển thị mất các sự kiện, trong khi hiển thị thì không.

Vì vậy tôi làm .attr('visibility') === "visible"