同位素过滤 - 重置到起始位置时出现问题
Isotope Filtering - Issues when reset to start position
我构建了一个同位素网格布局来显示项目,它还使用同位素过滤来更快地对项目进行排序。
在您尝试将下拉菜单恢复到默认位置 "All Services" 和 "All Sectors" 之前,过滤工作正常。然后所有的项目都隐藏了,当它们应该全部显示时。
http://www.ellyon.co.uk/wp/projects/
编辑:这可能是 Jquery 冲突吗?我已经添加了我的 functions.php,因为我不能 100% 确定我是否正确添加了脚本。
functions.php
function add_isotope() {
wp_register_script( 'isotope-init', get_template_directory_uri().'/js/isotope.js', array('jquery', 'isotope'), true );
wp_register_style( 'isotope-css', get_stylesheet_directory_uri() . '/styles/project.css' );
wp_enqueue_script('isotope-init');
wp_enqueue_style('isotope-css');
}
add_action( 'wp_enqueue_scripts', 'add_isotope' );
function modify_jquery() {
if ( !is_admin() ) {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', 'https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js', false, '3.2.1' );
wp_enqueue_script( 'jquery' );
}
}
add_action( 'init', 'modify_jquery' );
Isotope.js
// Grid
var $grid = $('.grid').isotope({
itemSelector: '.grid-item',
layoutMode: 'packery',
columnWidth: '.grid-sizer',
packery: {
gutter: '.gutter-sizer'
}
});
// state variable
var $expandedItem;
// expand when clicked
$grid.on( 'click', '.grid-item', function( event ) {
var isExpanded = $expandedItem && event.currentTarget == $expandedItem[0];
if ( isExpanded ) {
// exit if already expanded
return;
}
// un-expand previous
if ( $expandedItem ) {
$expandedItem.removeClass('gigante');
}
// set new & expand
$expandedItem = $( event.currentTarget ).addClass('gigante');
$grid.isotope('layout');
});
$grid.on( 'click', '.close-button button', function( event ) {
$expandedItem.removeClass('gigante');
// reset variable
$expandedItem = null;
$grid.isotope('layout');
event.stopPropagation();
});
// Select Filters
$(function() {
var $container = $('.grid'),
$select = $('div#filterGroup select');
filters = {};
$container.isotope({
itemSelector: '.grid-item'
});
$select.change(function() {
var $this = $(this);
var $optionSet = $this;
var group = $optionSet.attr('data-filter-group');
filters[group] = $this.find('option:selected').attr('data-filter-value');
var isoFilters = [];
for (var prop in filters) {
isoFilters.push(filters[prop])
}
var selector = isoFilters.join('');
$container.isotope({
filter: selector
});
return false;
});
$grid.imagesLoaded().progress( function() {
$grid.isotope('layout');
});
});
星号 *
是一种特殊情况,需要与其他过滤器值不同地处理,例如:
- 如果 select 编辑了一个或多个非星号值,则应忽略所有星号
- 如果没有非星号值被 selected,则默认为单个星号(显示全部)。
必须有多种方法来实施这些规则。这是一个:
// Select Filters
$(function() {
var $grid = $('.grid');
var $selects = $('div#filterGroup select').change(function() {
var selector = $selects.get().map(function(el) { // map the select elements ...
return $(el).data('filter-value'); // ... to an array of filter-values
}).filter(function(val) {
return val !== '*' // filter out all '*' values
}).join('') || '*'; // if joined array is empty-string, then default to a single '*'
$grid.isotope({
'filter': selector
});
return false;
});
...
});
请注意,原始代码的 filters
对象只会增加不必要的复杂性。 DOM 非常擅长表示自己的状态,因此与其在 javascript 中维护持久映射,不如在每次更改时将两个 select 元素直接映射到 Array 更简单其中之一。
如果 HTML 构造如下,代码会稍微简化:
<select class="filter option-set" data-filter-group="services">
<option value="">All Services</option>
<option value='.cladding'>Cladding</option>
...
</select>
<select class="filter option-set" data-filter-group="sectors">
<option value="">All Sectors</option>
<option value='.commerical'>Commerical</option>
...
</select>
那么,需要.filter()
出来的星号就消失了,剩下的是:
$(function() {
var $grid = $('.grid');
var $selects = $('div#filterGroup select').change(function() {
var selector = $selects.get().map(function(el) { // map the select elements ...
return $(el).val(); // ... to an array of values
}).join('') || '*'; // if joined array is empty-string, then default to a single '*'
$grid.isotope({
'filter': selector
});
return false;
});
...
});
我构建了一个同位素网格布局来显示项目,它还使用同位素过滤来更快地对项目进行排序。
在您尝试将下拉菜单恢复到默认位置 "All Services" 和 "All Sectors" 之前,过滤工作正常。然后所有的项目都隐藏了,当它们应该全部显示时。
http://www.ellyon.co.uk/wp/projects/
编辑:这可能是 Jquery 冲突吗?我已经添加了我的 functions.php,因为我不能 100% 确定我是否正确添加了脚本。
functions.php
function add_isotope() {
wp_register_script( 'isotope-init', get_template_directory_uri().'/js/isotope.js', array('jquery', 'isotope'), true );
wp_register_style( 'isotope-css', get_stylesheet_directory_uri() . '/styles/project.css' );
wp_enqueue_script('isotope-init');
wp_enqueue_style('isotope-css');
}
add_action( 'wp_enqueue_scripts', 'add_isotope' );
function modify_jquery() {
if ( !is_admin() ) {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', 'https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js', false, '3.2.1' );
wp_enqueue_script( 'jquery' );
}
}
add_action( 'init', 'modify_jquery' );
Isotope.js
// Grid
var $grid = $('.grid').isotope({
itemSelector: '.grid-item',
layoutMode: 'packery',
columnWidth: '.grid-sizer',
packery: {
gutter: '.gutter-sizer'
}
});
// state variable
var $expandedItem;
// expand when clicked
$grid.on( 'click', '.grid-item', function( event ) {
var isExpanded = $expandedItem && event.currentTarget == $expandedItem[0];
if ( isExpanded ) {
// exit if already expanded
return;
}
// un-expand previous
if ( $expandedItem ) {
$expandedItem.removeClass('gigante');
}
// set new & expand
$expandedItem = $( event.currentTarget ).addClass('gigante');
$grid.isotope('layout');
});
$grid.on( 'click', '.close-button button', function( event ) {
$expandedItem.removeClass('gigante');
// reset variable
$expandedItem = null;
$grid.isotope('layout');
event.stopPropagation();
});
// Select Filters
$(function() {
var $container = $('.grid'),
$select = $('div#filterGroup select');
filters = {};
$container.isotope({
itemSelector: '.grid-item'
});
$select.change(function() {
var $this = $(this);
var $optionSet = $this;
var group = $optionSet.attr('data-filter-group');
filters[group] = $this.find('option:selected').attr('data-filter-value');
var isoFilters = [];
for (var prop in filters) {
isoFilters.push(filters[prop])
}
var selector = isoFilters.join('');
$container.isotope({
filter: selector
});
return false;
});
$grid.imagesLoaded().progress( function() {
$grid.isotope('layout');
});
});
星号 *
是一种特殊情况,需要与其他过滤器值不同地处理,例如:
- 如果 select 编辑了一个或多个非星号值,则应忽略所有星号
- 如果没有非星号值被 selected,则默认为单个星号(显示全部)。
必须有多种方法来实施这些规则。这是一个:
// Select Filters
$(function() {
var $grid = $('.grid');
var $selects = $('div#filterGroup select').change(function() {
var selector = $selects.get().map(function(el) { // map the select elements ...
return $(el).data('filter-value'); // ... to an array of filter-values
}).filter(function(val) {
return val !== '*' // filter out all '*' values
}).join('') || '*'; // if joined array is empty-string, then default to a single '*'
$grid.isotope({
'filter': selector
});
return false;
});
...
});
请注意,原始代码的 filters
对象只会增加不必要的复杂性。 DOM 非常擅长表示自己的状态,因此与其在 javascript 中维护持久映射,不如在每次更改时将两个 select 元素直接映射到 Array 更简单其中之一。
如果 HTML 构造如下,代码会稍微简化:
<select class="filter option-set" data-filter-group="services">
<option value="">All Services</option>
<option value='.cladding'>Cladding</option>
...
</select>
<select class="filter option-set" data-filter-group="sectors">
<option value="">All Sectors</option>
<option value='.commerical'>Commerical</option>
...
</select>
那么,需要.filter()
出来的星号就消失了,剩下的是:
$(function() {
var $grid = $('.grid');
var $selects = $('div#filterGroup select').change(function() {
var selector = $selects.get().map(function(el) { // map the select elements ...
return $(el).val(); // ... to an array of values
}).join('') || '*'; // if joined array is empty-string, then default to a single '*'
$grid.isotope({
'filter': selector
});
return false;
});
...
});