如何在jQuery中检测当前页面媒体类型

Question

我有一个包含输入字段的页面.当页面处于媒体类型打印时,我想隐藏所有0值文本字段.

我试过jQuery.但这在屏幕模式和打印模型中都有效.

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

如果我检测到当前页面的媒体类型.我可以完成它.不幸的是我无法获得正确的代码.

我也试过jmediatype,但没有下载选项.

Answer 1

如果您只想隐藏字段value="0"，则可以仅使用 CSS 来完成此操作：

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

另一种方法是为这些元素提供一个仅被打印样式表隐藏的类：

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

并使用这样的样式：

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