如何从外部页面链接操作元素的数据属性?

时间:2016-01-15 08:19:47

标签: javascript php jquery html5 custom-data-attribute

我正在寻找将数据属性传递给新页面的绝对最简单的方法(非AJAX加载)。

我一整天都在乱涂Wordpress主题,试图自定义图库类别过滤器。我想在调整预先存在的布局时尽可能少编码,但这里的复杂因素是我有一个页面,已经有数据属性分配给可以从同一页面上的链接过滤的元素我需要能够加载具有已经设置的数据属性的页面,以便从外部链接进行过滤。

我会尝试为可能有帮助的场景制作视觉效果(或不是?):

第一页已经正常运作:

<!---main-gallery_page.php--->
<header class="category-filters">
<ul class="list">
<li> <a href="#" data-example-id="generic-1">Category Filter 1</a> </li>
<li> <a href="#" data-example-id="generic-2">Category Filter 2</a> </li>
<li> <a href="#" data-example-id="generic-3">Category Filter 3</a> </li>
</ul>
</header>

<div class="gallery-thumbs">
<!--- thumbnails with example-id data attributes are filtered, respectively: "generic-X" --->
</div>

第二页需要在加载后操作上面的页面^

<!---second-example_page.php--->
<div class="alternate-category-filters">
<ul class="list">
<li> <a href="/path_to/main-gallery_page.php" data-example-id="generic-1">Category Filter 1</a> </li>
<li> <a href="/path_to/main-gallery_page.php" data-example-id="generic-2">Category Filter 2</a> </li>
<li> <a href="/path_to/main-gallery_page.php" data-example-id="generic-3">Category Filter 3</a> </li>
</ul>
</div>

显然第二个例子不会起作用,因为新页面没有收到任何过滤缩略图的指令,所以它只是按原样加载。

只是希望能够在外部(非ajax)页面上指定的页面加载上操作类别过滤器。关于简单方法的任何想法?我一直试图看看我能用php回声做什么,甚至将信息填充到超链接href值,但我无法让它工作。如果我可以做这样的事情,那将是理想的:

<!---second-example_page.php--->

<div class="alternate-category-filters">
<ul class="list">
<li> <a href="/path_to/main-gallery_page.php?exampleId='generic-1'">Category Filter 1</a> </li>
<li> <a href="/path_to/main-gallery_page.php?exampleId='generic-2'">Category Filter 2</a> </li>
<li> <a href="/path_to/main-gallery_page.php?exampleId='generic-3'">Category Filter 3</a> </li>
</ul>
</div>

非常感谢帮助,我已经筋疲力尽地跳过数百万个似乎总是错过解释这个特定场景解决方案的主题。

1 个答案:

答案 0 :(得分:1)

您可以在localStorage中轮询值。使主页轮询localStorage.category。 (例如,使用setTimeout)。然后,一旦第二页加载并更改了值,主页面就可以看到更改并采取相应的行动。

相关问题