theo dõi

Gần nhất :

Thống kê câu hỏi

Chuyên mục : Lập trình
Topic : JavaScript
Hỏi lúc:
Lượt xem: 3,575

Làm thể nào kiểm tra 1 phần tử là ẩn?

Tạ Thu Hiền Tạ Thu Hiền
 08  01  00
08 bình chọn hữu ích bởi Phạm Hữu Tùng, Trịnh Vỹ Khải Huỳnh Thùy Uyên ... (tất cả)

Trong jQuery, có thể chuyển đổi các khả năng hiển thị của một phần tử, bằng cách sử dụng .hide(), .show() hoặc .toggle().

Sử dụng jQuery, làm thế nào bạn sẽ kiểm tra nếu một phần tử được hiển thị hoặc ẩn?

3,575 xem 14 theo dõi 08 hữu ích hỏi –

Bạn biết ai đó có thể trả lời câu hỏi này?. Bạn có thể giúp đỡ bằng cách tìm những người giỏi nhất:

user user user user user

Phan Anh Quốc Phan Anh Quốc
 14  00  01
14 bình chọn hữu ích bởi Hoàng An Tâm, Phạm Đại Dương Bùi Thái Bình ... (tất cả)
// Checks for display:[none|block], ignores visible:[true|false]
$(element).is(":visible");
3,348 xem 14 hữu ích trả lời –
Nguyễn Hoàng Dũng Nguyễn Hoàng Dũng
 09  00  02
07 bình chọn hữu ích bởi Vũ Thảo Uyên, Võ Anh Duy Phạm Diệp Anh ... (tất cả)

Bạn có thể sử dụng hidden để kiểm tra các phần tử ẩn

// Tất cả các phần tử ẩn
$('element:hidden')

visible để kiểm tra các phần tử hiển thị

// Tất cả các phần tử hiển thị
$('element:visible')
3,347 xem 07 hữu ích trả lời –
Tạ Ðức Quang Tạ Ðức Quang
 04  00  01
04 bình chọn hữu ích bởi Hồ Chí Nam, Nguyễn Ngọc Thái Huỳnh Bảo Duy ... (tất cả)

Một phần tử có thể được ẩn với "display: none", "visibility: hidden" hoặc "opacity: 0". Sự khác biệt giữa các phương pháp:

  • display:none ẩn các phần tử, và không chiếm bất kỳ khoảng trống nào
  • visibility:hidden ẩn các phần tử, nhưng nó vẫn chiếm khoảng trống trong cách sắp đặt các phần từ
  • opacity:0 ẩn các phần tử như "visibility:hidden", vnhưng nó vẫn chiếm khoản trống trong cách  sắp đặt các phần từ; sự khác biệt duy nhất là opacity cho phép để làm cho một phần tử trong suốt một phần
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: "" });
}

Phương pháp chuyển đổi hữu ích trong jQuery

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

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

$('.click').click(function() {
    $('.target').fadeToggle();
});
3,332 xem 04 hữu ích trả lời –
Trần Trọng Hà Trần Trọng Hà
 17  01  02
04 bình chọn hữu ích bởi Vũ Nghĩa Dũng, Hồ Ðức Giang Đặng Thu Minh ... (tất cả)
if ( $(element).css('display') == 'none' ){
    // element is hidden
}

Chức năng không hoạt động với khả năng hiển thị các thuộc tính.

3,336 xem 04 hữu ích trả lời –
Dương Thanh Huyền Dương Thanh Huyền
 05  00  02
03 bình chọn hữu ích bởi Đặng Nguyên Giang, Ngô Anh Tài Lý Ðình Trung

Mình đang sử dụng show()hide() để làm cho div ẩn / hiển thị:

if( $(this).css("display") == 'none' ){

    /* your code here*/
}
else{

    /*  alternate logic   */
}
3,334 xem 03 hữu ích trả lời –
Vũ Quang Hiếu Vũ Quang Hiếu
 02  00  01
02 bình chọn hữu ích bởi Ngô Mai Tâm Tạ Bích San

Mã html

<div id="clickme">
    Click here
</div>
<img id="book" src="/content/uploads/pic.jpg"

jQuery

<script>

$('#clickme').click(function() {
$('#book').toggle('slow', function() {
    // Animation complete.
     alert( $('#book').is(":visible"));//<--- TRUE if Visible False if Hidden
   });
});
</script>
3,333 xem 02 hữu ích trả lời –