Geçerli sayfa ortam türü jQuery'de nasıl algılanır

Question

Giriş alanları olan bir sayfam var. Sayfa medya türü baskısı olduğunda tüm 0 değerlerini metin alanları gizlemek istiyorum.

jQuery'da denedim. Ancak bu hem ekran modunda hem de baskı modelinde çalışır.

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

Ben şimdiki sayfanın medya ty tespit ederse pe. Ben bitirebilirim. Ne yazık ki doğru kodu alamadım.

Ayrıca jmediatype'u denedim, ancak indirme seçeneği yok. Sadece value="0" olmayan alanları gizlemek istiyorsanız

Answer 1

, sadece CSS ile bunu yapabilirsiniz:

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

bir alternatif olan elemanlarını yalnızca yazdırma stil sayfası tarafından gizlenen alır bir sınıf vermek olacaktır:

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

Ve böyle bir stil kullanmak:

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

Answer 2

bir tanımla Medya baskı için CSS dosyası sadece içeren:

.empty 
{ 
    display: none; 
} 

sadece medya baskı

için click olayı için düğmeye bir dinleyici ekleyin, sizin büyücü bu CSS dosyası içerir. Bu dinleyici boş değer ile giriş için boş CSS sınıfı ekleyecektir.

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

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

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

    }); 
}); 

medya ekran için, bu sınıf bir şey yapmaz, ama medya baskı için bu hiçbiri ekranı değişecektir.

Answer 3

Eğer jQuery yapabilirsiniz belli stil ortam türünü öğrenmek isterseniz:

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

Eğer stil ayırmak ve medya yerine özniteliği ile işaretlemesinde onlara yük olurdu medya sorgularını tek bir dosyada kullanma.