我有一个使用随机播放过滤器的投资组合页面。我试图将经过过滤的属性传递到我的主页上，那里有使用相同过滤器参数的链接，但是我似乎无法将其传递过来。我尝试使用PHP回显功能，但无法获取它。我在投资组合页面上运行了两个过滤器，因为它在过滤投资组合时同时显示了两个有关项目的小段文字。
下面是主页上的我的HTML：
<section class="bg-secondary" id="landing-main">
<div class="container-fluid" id="landing-top">
<div class="row wow fadeIn">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 bg-secondary" id="column-1">
<div id="filtertitle1">
<div id="darker">
<h1><a href="portfolio-wide-3.html" class="smart-text">filter title1</a></h1>
<div class="category-text"><h5>sub heading</h5>
<p>Lorem in se philosophari ne o velit appellat domesticarum ea et dolor elit se offendit, sint mentitum non distinguantur, fugiat ingeniis ubi</p>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 bg-secondary" id="column-2">
<div id="filtertitle2">
<div id="darker">
<h1><a href="portfolio-wide-3.html" class="smart-text">filter title2</a></h1>
<div class="category-text"><h5>subheading</h5>
<p>Lorem in se philosophari ne o velit appellat domesticarum ea et dolor elit se offendit, sint mentitum non distinguantur, fugiat ingeniis ubi</p>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 bg-secondary" id="column-3">
<div id="filtertitle3">
<div id="darker">
<h1><a href="portfolio-wide-3.html" class="smart-text">filter title3</a></h1>
<div class="category-text"><h5>sub heading</h5>
<p>Lorem in se philosophari ne o velit appellat domesticarum ea et dolor elit se offendit, sint mentitum non distinguantur, fugiat ingeniis ubi</p>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 bg-secondary" id="column-4">
<div id="filtertitle4">
<div id="darker">
<h1><a href="portfolio-wide-3.html" class="smart-text">filter title4</a></h1>
<div class="category-text"><h5>sub heading</h5><p>Lorem in se philosophari ne o velit appellat domesticarum ea et dolor elit se offendit, sint mentitum non distinguantur, fugiat ingeniis ubi</p>
</div>
</div>
</div>
</div>
</div>
</div>
这是我的投资组合页面：
<section id="portfolio" class="portfolio-wide no-pad-btm">
<div class="container-fluid text-left" id="categorical-text">
<div class="row" id="categorical-text">
<div class="col-xs-12" id="categorical-text">
<ul class="portfolio-sorting list-inline" id="main-sorter">
<li class="all"><a href="#all" data-group="all">All</a></li><hr>
<li class="stitch"><a href="#stitch" data-group="stitch">Stitch</a></li>
<li class="filtertitle1"><a href="#filtertitle1" data-group="filtertitle1">Filter Title 1</a></li>
<li class="filtertitle2"><a href="#renew" data-group="filtertitle2">Filter Title 2</a></li>
<li class="filtertitle3"><a href="#filtertitle3" data-group="filtertitle3">Filter Title 3</a></li><hr>
<li id="second-sorter"><a href="#mixed" data-group="mixed">Mixed-Use</a></li>
<li id="second-sorter"><a href="portfolio-single.html" data-group="urban">Urban Design</a></li>
<li id="second-sorter"><a href="portfolio-single.html" data-group="single">Single Family</a></li>
<li id="second-sorter"><a href="portfolio-single.html" data-group="commercial">Commercial</a></li>
<li id="second-sorter"><a href="portfolio-single.html" data-group="adapt">Adaptive Reuse</a></li>
<li id="second-sorter"><a href="portfolio-single.html" data-group="institutional">Institutional</a>
</ul>
<div class="thesis col-lg-5 col-md-5 col-sm-7 col-xs-12" id="thesis">
<div class="all-text wow fadeIn" id="all">
<h1></h1>
<p>
</p>
</div>
<div class="filtertitle1-text wow fadeIn" id="filtertitle1">
<h1>Filter Title 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida enim et massa lacinia consequat. Fusce sapien velit, egestas sed dui non, tincidunt laoreet mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus convallis nec dui et facilisis. ectus, ut vestibulum orci cursus nec. Proin congue quam et eros cursus bibendum. Duis dapibus orci vel finibus lobortis. <a href="" class="continue">>>></a>
</p>
</div>
<div class="filtertitle2-text wow fadeIn" id="filtertitle2">
<h1>Filter Title 2</h1>
<p>Sed in nunc eu arcu hendrerit eleifend. Morbi porta auctor elit, vitae faucibus erat imperdiet non. Ut condimentum blandit magna a venenatis. Praesent tortor sapien, viverra ac nisi eget, interdum dignissim diam. Cras vehicula tortor quam, et bibendum orci ullamcorper vitae. Pellentesque ac egestas mi, at auctor orci. In quis finibus tellus, in viverra lacus. Donec commodo nisi arcu. Mauris tempus nulla in eleifend vestibulum. Curabitur vulputate eleifend lobortis. <a href="" class="continue">>>></a>
</p>
</div>
<div class="filtertitle3-text wow fadeIn" id="filtertitle3">
<h1>Filter Title 3</h1>
<p>Curabitur pretium felis quis venenatis posuere. Donec commodo eros a diam sodales imperdiet. Ut ac nunc vel eros placerat fermentum. Vivamus tempus ac ex nec suscipit. Suspendisse lobortis egestas diam. Maecenas et accumsan eros. Sed euismod arcu vel mi pulvinar, sed lacinia nunc euismod. <a href="" class="continue">>>></a>
</p>
</div>
<div class="filtertitle4-text wow fadeIn" id="filtertitle4">
<h1>Filter Title 4</h1>
<p>Sed vel condimentum nulla. Curabitur egestas libero sapien, sit amet aliquam enim mattis et. Sed finibus luctus arcu sit amet mollis. Maecenas tempor, nunc at hendrerit hendrerit, dui arcu iaculis neque, eu dignissim tortor massa nec orci. Nulla facilisi. Sed fermentum varius est. Quisque arcu nisl, pulvinar quis ligula sit amet, vulputate vulputate metus. Vivamus sit amet neque nec lectus bibendum rhoncus eget sodales eros. <a href="" class="continue">>>></a>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div id="grid" class="row portfolio-items">
<div data-groups='["dream", "institutional"]' class="col-sm-4" id="build">
<div class="portfolio-item"><a href="portfolio-single.html"><img src="img/portfolio/1.jpg" alt="">
<div class="portfolio-overlay">
<div class="caption">
<h5 id="project-title">Project 1</h5><span>Cairo, Egypt</span>
</div>
</div></a></div>
</div>
<div data-groups='["multi", "commercial", "mixed", "stitch"]' class="col-sm-4">
<div class="portfolio-item"><a href="portfolio-single.html"><img src="img/portfolio/2.jpg" alt="">
<div class="portfolio-overlay">
<div class="caption">
<h5 id="project-title">Project 2</h5><span>Portland, OR</span>
</div>
</div></a></div>
</div>
<div data-groups='["multi", "commercial"]' class="col-sm-4">
<div class="portfolio-item"><a href="portfolio-single.html"><img src="img/portfolio/3.jpg" alt="">
<div class="portfolio-overlay">
<div class="caption">
<h5 id="project-title">Project 3</h5><span>Portland, OR</span>
</div>
</div></a></div>
</div>
这是我的随机播放过滤器Javascript：
var shuffleme = (function( $ ) {
'use strict';
var $grid = $('#grid'), //locate what we want to sort
$filterOptions = $('.portfolio-sorting li'), //locate the filter categories
$sizer = $grid.find('.shuffle_sizer'), //sizer stores the size of the items
init = function() {
// None of these need to be executed synchronously
setTimeout(function() {
listen();
setupFilters();
}, 100);
// instantiate the plugin
$grid.shuffle({
itemSelector: '[class*="col-"]',
sizer: $sizer
});
},
// Set up button clicks
setupFilters = function()
{
var $btns = $filterOptions.children();
$btns.on('click', function(e)
{
e.preventDefault();
var $this = $(this),
isActive = $this.hasClass( 'active' ),
group = isActive ? 'all' : $this.data('group');
// Hide current label, show current label in title
if ( !isActive )
{
$('.portfolio-sorting li a').removeClass('active');
}
$this.toggleClass('active');
// Filter elements
$grid.shuffle( 'shuffle', group );
});
$btns = null;
},
// Re layout shuffle when images load. This is only needed
// below 768 pixels because the .picture-item height is auto and therefore
// the height of the picture-item is dependent on the image
// I recommend using imagesloaded to determine when an image is loaded
// but that doesn't support IE7
listen = function() {
var debouncedLayout = $.throttle( 300, function() {
$grid.shuffle('update');
});
// Get all images inside shuffle
$grid.find('img').each(function() {
var proxyImage;
// Image already loaded
if ( this.complete && this.naturalWidth !== undefined ) {
return;
}
// If none of the checks above matched, simulate loading on detached element.
proxyImage = new Image();
$( proxyImage ).on('load', function() {
$(this).off('load');
debouncedLayout();
});
proxyImage.src = this.src;
});
// Because this method doesn't seem to be perfect.
setTimeout(function() {
debouncedLayout();
}, 500);
};
return {
init: init
};
}( jQuery ));
shuffleme.init(); //filter portfolio
});
最后这是我的Javascript，用于在过滤后显示文本：
$('ul#main-sorter').each(function(){
// For each set of tabs, we want to keep track of
// which tab is active and it's associated content
var $active, $content, $links = $(this).find('a');
// If the location.hash matches one of the links, use that as the active tab.
// If no match is found, use the first link as the initial active tab.
$active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
$active.addClass('active');
$content = $($active[0].hash);
// Hide the remaining content
$links.not($active).each(function () {
$(this.hash).hide();
});
// Bind the click event handler
$(this).on('click', 'a', function(e){
// Make the old tab inactive.
$active.removeClass('active');
$content.hide();
// Update the variables with the new link and content
$active = $(this);
$content = $(this.hash);
// Make the tab active.
$active.addClass('active');
$content.show();
// Prevent the anchor's default click action
e.preventDefault();
});});
这看起来很简单，但我想我还是很想念它。我在这里找到的结束答案是：jQuery Isotope Filter from Different Page Wordpress，但我没有使用同位素过滤。
谢谢！