У меня есть подменю на основе изотопа. При нажатии одной из опций следует отфильтровать остальные кнопки.
Трудно объяснить, но вы можете увидеть его здесь на скрипке: http://jsfiddle.net/adamrabbit/YL8gH/42/
В примере, когда синий цвет нажат в цветовой категории, все остальные цвета должны исчезнуть в воздухе! Все, что должно быть оставлено в цветовой категории, это "показать все" и "синий".
Для жизни меня я не могу заставить это работать... но вот что я пробовал. Пожалуйста, имейте в виду, что мой единственный опыт работы с javascript пробивается через курсы курсов по математике в последние пару недель... так что все может выглядеть немного!
Это последняя, вероятно, смехотворно чрезмерно сложная попытка - моя первая попытка просто ".hide()" и ".show()" неиспользуемые кнопки. Этот код не работает, но вы можете видеть мое мышление.
$(function () {
"use strict";
//Define your containers and option sets
var $container = [$('#button-container'), $('#item-container')],
$optionSets = [$('#button-options .option-set'), $('#item-options .option-set')],
$value = [{}, {}];
//Initialize isotope on each container
jQuery.each($container, function (j) {
var isotopeOptions = eval('(' + (this.attr('isotope-options')) + ')');
this.isotope(isotopeOptions);
});
//Initialize filter links for each option set
jQuery.each($optionSets, function (index, object) {
var $optionLinks = object.find('a');
$optionLinks.click(function () {
var $this = $(this),
$optionSet = $this.parents('.option-set'),
options = [{}, {}],
key = $optionSet.attr('data-option-key'),
group = $optionSet.attr('data-filter-group');
$value[index][group] = $this.attr('data-option-value');
// close menu and deselect base option if already selected
if ($this.hasClass('is-checked')) {
$container[0].isotope({
filter: '.xxx'
});
$optionSets[0].find('.is-checked').removeClass('is-checked');
return false;
}
// change classes
$optionSet.find('.is-checked').removeClass('is-checked');
$this.addClass('is-checked');
if ((index === 1) && ($(this).attr('id') !== 'all')) {
$optionSet.find('.' + group + 'show').removeClass(group + 'show');
$optionSet.find('#all').addClass(group + 'show');
$this.addClass(group + 'show');
} else if ((index === 1) && ($(this).attr('id') === 'all')) {
$optionSet.find('.' + group + 'show').removeClass(group + 'show');
}
// show all
if ($value[index][group] === '.reset') {
$optionSets[0].find('a').each(function (index) {
$(this).text($(this).attr('name'));
});
$container[0].isotope({
filter: '.xxx'
});
$container[1].isotope({
filter: ''
});
$optionSets[1].find('.is-checked').removeClass('is-checked');
$optionSets[1].find('#all').addClass('is-checked');
return false;
}
// parse 'false' as false boolean
var isoFilters = [
[],
[]
],
newIsoFilters = [];
for (var prop in $value[index]) {
isoFilters[index].push($value[index][prop]);
}
var selector = [],
newSelector;
selector[index] = isoFilters[index].join('');
newIsoFilters = isoFilters[0].concat(['.' + group + 'show']);
newSelector = newIsoFilters.join('');
if ((index === 1) && ($(this).attr('id') !== 'all')) {
$optionSets[0].find('.is-checked').text($(this).attr('name'));
options[0][key] = newSelector;
options[1][key] = selector[1];
} else if ((index === 1) && ($(this).attr('id') === 'all')) {
options[0][key] = selector[0];
options[1][key] = selector[1];
} else {
options[index][key] = selector[index];
}
if (key === 'layoutMode' && typeof changeLayoutMode === 'function') {
// changes in layout modes need extra logic
changeLayoutMode($this, options[index]);
} else {
// otherwise, apply new options
if ((index === 1) && ($(this).attr('id') !== 'all')) {
$container[0].isotope(options[0]);
$container[1].isotope(options[1]);
} else
$container[index].isotope(options[index]);
}
return false;
});
});
});
Обратите внимание: это было подделано из этого ответа и начиналось с упомянутой там скрипки.
Я знаю, я так нетерпелив к ответу.
Во всяком случае, я получил половину в основном работы, но решил, что мне не нравится внешний вид, поэтому я бросил его. Код по-прежнему (в основном) полезен http://jsfiddle.net/adamrabbit/YL8gH/34/
оригинальный способ без исчезающих кнопок находится здесь http://jsfiddle.net/adamrabbit/YL8gH/37/
теперь пришло время гадать с кнопкой сортировки.
$(function () {
"use strict";
//Define your containers and option sets
var $container = [$('#button-container'), $('#item-container')],
$optionSets = [$('#button-options .option-set'), $('#item-options .option-set')],
$value = [{}, {}];
//Initialize isotope on each container
jQuery.each($container, function (j) {
var isotopeOptions = eval('(' + (this.attr('isotope-options')) + ')');
this.isotope(isotopeOptions);
});
//Initialize filter links for each option set
jQuery.each($optionSets, function (index, object) {
var $optionLinks = object.find('a');
$optionLinks.click(function () {
var $this = $(this),
$optionSet = $this.parents('.option-set'),
options = [{}, {}],
key = $optionSet.attr('data-option-key'),
group = $optionSet.attr('data-filter-group');
$value[index][group] = $this.attr('data-option-value');
// close menu and deselect base option if already selected
if ($this.hasClass('is-checked')) {
$container[0].isotope({
filter: '.xxx'
});
$optionSets[0].find('.is-checked').removeClass('is-checked');
return false;
}
// change classes
$optionSet.find('.is-checked').removeClass('is-checked');
$this.addClass('is-checked');
if ((index === 1) && ($(this).attr('id') !== 'all')) {
$optionSet.find('.' + group + 'show').removeClass(group + 'show');
$optionSet.find('#all').addClass(group + 'show');
$this.addClass(group + 'show');
} else if ((index === 1) && ($(this).attr('id') === 'all')) {
$optionSet.find('.' + group + 'show').removeClass(group + 'show');
}
// show all
if ($value[index][group] === '.reset') {
$optionSets[0].find('a').each(function (index) {
$(this).text($(this).attr('name'));
});
$container[0].isotope({
filter: '.xxx'
});
$container[1].isotope({
filter: ''
});
$optionSets[1].find('.is-checked').removeClass('is-checked');
$optionSets[1].find('#all').addClass('is-checked');
return false;
}
// parse 'false' as false boolean
var isoFilters = [
[],
[]
],
newIsoFilters = [];
for (var prop in $value[index]) {
isoFilters[index].push($value[index][prop]);
}
var selector = [],
newSelector;
selector[index] = isoFilters[index].join('');
newIsoFilters = isoFilters[0].concat(['.' + group + 'show']);
newSelector = newIsoFilters.join('');
if ((index === 1) && ($(this).attr('id') !== 'all')) {
$optionSets[0].find('.is-checked').text($(this).attr('name'));
options[0][key] = newSelector;
options[1][key] = selector[1];
} else if ((index === 1) && ($(this).attr('id') === 'all')) {
options[0][key] = selector[0];
options[1][key] = selector[1];
} else {
options[index][key] = selector[index];
}
if (key === 'layoutMode' && typeof changeLayoutMode === 'function') {
// changes in layout modes need extra logic
changeLayoutMode($this, options[index]);
} else {
// otherwise, apply new options
if ((index === 1) && ($(this).attr('id') !== 'all')) {
$container[0].isotope(options[0]);
$container[1].isotope(options[1]);
} else
$container[index].isotope(options[index]);
}
return false;
});
});
});