Question

    <script>
    $(document).ready(function(){

    $("#print").click(function(){
        $("body").hide();
        $("p").show();
        window.print();
        $("body").show();            
    });        
});
</script>
</head>
<body>

<p>THIS SHOULD BE PRINTED </p>

<button >Hide</button>
<button >Show</button>
<button id="print">print</button>    
</body>

给出的是示例代码。单击“打印”按钮应隐藏页面主体，但“p”标记内的值除外。需要帮助，如何实现这一目标？是否有某种方法使“p”标签或“div”标签暂时作为主体？

Answer 1

使用以下给定的功能首先隐藏身体标签的所有孩子，然后显示所需的孩子

$("body").find("*").hide();

Answer 2

我会以不同的方式构建您的应用程序，因为您无法显示隐藏的元素中包含的内容。

<body>
    <div id="hide-me"></div>
    <p id="show-me">THIS SHOULD BE PRINTED</p>
</body>

并将你的逻辑改为这样......

$(document).ready(function(){
    $("#print").click(function(){
        $("#hide-me").hide();
        $("#show-me").show();
        window.print();
        $("#hide-me").show();            
    });
});

Answer 3

隐藏页面中的所有内容可能会有风险。此外，该方法使您可以在隐藏正文后添加内容。

更好的方法是让您想要的内容出现在前面，填满整个屏幕，并隐藏其后的所有内容而不删除。

这样做非常简单。

＆＃13;

$(function() {
  $('.show-print').on('click', function() {
    $('.print-container').addClass('active-print');
  });
});

＆＃13;

.print-container {
  position: fixed;
  background: white;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.print-container:not(.active-print) {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <p>
          Normal body content
    </p>
    <button class="show-print">Print</button>
    
    <div class="print-container">
      <div class="print-content">
        I'm Print. I'm stronger than BODY!
      </div>
    </div>

＆＃13;

隐藏正文标记但仍显示div

3 个答案: