Jak wykrywać bieżący typ nośnika strony w jQuery

Question

Mam stronę z polami wprowadzania. Chcę ukryć wszystkie pola tekstowe wartości 0, gdy strona jest w trybie drukowania.

Próbowałem w jQuery. Ale działa to zarówno w trybie ekranu, jak i modelu drukowania.

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

Gdybym wykryć aktualnej strony medialnego TY pe. Mogę to skończyć. Niestety nie udało mi się uzyskać odpowiedniego kodu.

Próbowałem również jmediatype, ale nie ma opcji pobierania.

Answer 1

Jeśli chcesz po prostu ukryć pola z value="0", można to zrobić tylko z CSS:

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

Alternatywą byłoby dać te elementy klasy, która dopiero zostanie ukryty przez stylów wydruku:

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

i używać stylu takiego:

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

Answer 2

zdefiniować plik CSS dla nośników wydruku, które zawierają tylko:

.empty 
{ 
    display: none; 
} 

zawierać ten plik CSS w swoim maga, tylko do druku mediów

Dodaj słuchacza na przycisk do zdarzenia click. Ten słuchacz doda pustą klasę CSS dla danych wejściowych z pustą wartością.

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

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

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

    }); 
}); 

Na ekranie mediów, ta klasa nie zrobi nic, ale dla druku mediów będzie zmienić wyświetlacz żaden.

Answer 3

Jeśli chcesz dowiedzieć się typ nośnika określonego arkusza stylów można to zrobić w jQuery:

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

Trzeba oddzielić stylów i załadować je w znacznikach z atrybutu media zamiast korzystania z zapytań o media w jednym pliku.