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

Answer 2

仅为媒体打印定义一个包含以下内容的CSS文件：

.empty
{
    display: none;
}

在您的法师中包含此CSS文件，仅用于媒体打印

在click事件的按钮上添加一个侦听器。此侦听器将为具有空值的输入添加空CSS类。

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

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

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

    });
});

对于媒体屏幕，此课程将不执行任何操作，但对于媒体打印，它会将显示更改为无。

Answer 3

如果要查找特定样式表的媒体类型，可以在jQuery中执行此操作：

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

您必须将样式表分开并使用media属性在标记中加载它们，而不是在一个文件中使用媒体查询。

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

3 个答案: