0

I am using jQuery's load function on a page to get the contents of a webpage and then print it. Here is my code:

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

    window.print();
});

where the variable 'load' is the url.

The problem is that the page being loaded has a javascript designed filter attached it, meaning, on that page the user can click buttons to remove or display certain information e.g. { display: none }.

However the items which are hidden by the user DO show up in this new page. I understand why this is so, the JavaScript isn't changing the base HTML of the page and it's still there, but I would like to find a way around this issue.

4

1 回答 1

0

因此，当 #container 用新内容刷新时，所有旧的 DOM 元素（HTML 的内部版本）都会被销毁并替换 - 因此它会丢失 display: none 属性。

解决此问题的一种方法是执行以下操作：

<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 规则。

另一种方法是将状态存储在 JS 中，然后在 DOM 重新加载时刷新它们。

于 2012-09-06T17:29:07.210 回答