0

ページでjQueryのload機能を使用して、Webページのコンテンツを取得してから印刷しています。これが私のコードです：

$('#container').load('<?php print $_GET['load']; ?>', function(data) {

    window.print();
});

ここで、変数「load」は URL です。

問題は、読み込まれているページに JavaScript で設計されたフィルターが添付されていることです。つまり、そのページでユーザーはボタンをクリックして特定の情報を削除または表示できます{ display: none }。

ただし、ユーザーが非表示にしているアイテムは、この新しいページに表示されます。JavaScript がページのベース HTML を変更せず、まだそこにある理由は理解できますが、この問題を回避する方法を見つけたいと思います。

4

1 に答える 1

0

そのため、#container が新しいコンテンツで更新されると、古い DOM 要素 (HTML の内部バージョン) がすべて破棄されて置き換えられるため、display: none プロパティが失われます。

これを回避する1つの方法は、次のようにすることです。

<div id='container'>
  <div class="a">Stuff 1</div>
  <div class="b">Stuff 2</div>
  <div class="c">Stuff 3</div>
</div>

<input type="button" class="hide_something" data-hide-class="a" value="Hide A">
<input type="button" class="hide_something" data-hide-class="b" value="Hide B">
<input type="button" class="hide_something" data-hide-class="c" value="Hide C">

$('.hide_something').on("click", function() { 
  $('#container').addClass('hide_' + $(this).data("hide-class")); 
}​);


.hide_a .a,
.hide_b .b,
.hide_c .c { display: none; }

ここにフィドルがあります: http://jsfiddle.net/2Qkjn/

したがって、基本的に、ユーザーがボタンをクリックすると、CSS が内部コンテンツを非表示にするクラスが外側のコンテナーに追加されます。内部コンテンツを置き換えても、CSS ルールは変更されません。

もう 1 つの方法は、状態を JS に保存し、DOM のリロード時に状態を更新することです。

于 2012-09-06T17:29:07.210 に答える