Cách phát hiện loại phương tiện trang hiện tại trong jQuery

Question

Tôi có một trang có các trường nhập. Tôi muốn ẩn tất cả các trường văn bản có giá trị 0 khi trang ở chế độ in loại phương tiện.

Tôi đã thử trong jQuery. Nhưng điều này hoạt động cả ở chế độ màn hình và kiểu in.

HTML:

<div class="screen">some screen</div> 
<div class="print">some print</div> 
<input type='text' name='' id='1' class='' value='0'/> 
<input type='text' name='' id='2' class='' value='5'/> 
<button>Print</button> 

JS:

$('button').click(function(){ 
    $('input[type=text]').each(function(){ 
     if ($(this).val() == 0){ 
     $(this).hide() 
     }  
    }) 
}) 

CSS:

@media print{ 
    .screen{ 
     display:none; 
    } 

    .print{ 
     display:block; 
    } 
} 

@media screen{ 
    .screen{ 
     display:block   
    } 

    .print{ 
     display:none; 
    } 
} 

Nếu tôi phát hiện trang hiện tại của phương tiện truyền thông ty pe. Tôi có thể hoàn thành nó. Rất tiếc, tôi không thể nhận được mã đúng.

Tôi cũng đã thử jmediatype, nhưng không có tùy chọn tải xuống.

Answer 1

Nếu bạn chỉ muốn ẩn các lĩnh vực với value="0", bạn có thể làm được điều này chỉ với CSS:

@media print { 
    input[value="0"] { 
     display: none; 
    } 
} 

Một thay thế sẽ được cung cấp cho những yếu tố một lớp học mà chỉ bị ẩn bởi stylesheet in:

$('button').click(function(){ 
    $('input[type=text]').filter(function() { 
     return parseInt(this.value, 10) == 0; 
    }).addClass('print-hidden'); 
}); 

Và sử dụng một phong cách như thế này:

@media print { 
    .print-hidden { 
     display: none; 
    } 
} 

Answer 2

Xác định tập tin CSS cho phương tiện in chỉ có chứa:

.empty 
{ 
    display: none; 
} 

bao gồm file CSS này trong mage của bạn, chỉ cho phương tiện truyền thông in

Thêm một người biết lắng nghe vào nút cho sự kiện nhấp chuột. Người nghe này sẽ thêm lớp CSS trống cho đầu vào có giá trị rỗng.

$("ID_OF_YOUR_BUTTON").click(function(mouseEvent) { 

    $("input[type=text]").each(function(index, element) { 

     if ($(element).val().length == 0) 
      $(element).addClass("empty"); 

    }); 
}); 

Đối với màn hình truyền thông, lớp này sẽ không làm gì cả, nhưng đối với các phương tiện truyền thông in nó sẽ thay đổi màn hình để none.

Answer 3

Nếu bạn muốn tìm hiểu các loại phương tiện của một kiểu đặc biệt mà bạn có thể làm điều này trong jQuery:

var media = $('link[href$="styles.css"]').attr('media'); 

Bạn sẽ phải tách stylesheets của bạn và tải chúng trong đánh dấu với thuộc tính phương tiện truyền thông thay vì sử dụng truy vấn phương tiện trong một tệp.