私は現在 Isotope を使用して出版物のリストをフィルター処理していますが、フィルターの 2 番目のリストが非常に長いため、文書化された標準のリンク フィルター メソッドを select 要素と組み合わせることができるようにしたいと考えています。
私が苦労しているのは、2 つの異なるタイプの要素を処理し、選択した値を1 つのオプション配列に結合することです。フィルターを互いに独立して機能させることはできますが (以下のコード)、それらは連携して機能する必要があります。2 つの異なるアクション (クリックまたは変更) と 2 つの属性 (class= または value=) を 1 つのオプション配列に結合して、isotop フィルターに渡すにはどうすればよいですか?
var $container = $('#library');
// select ccskills publications by default
$container.isotope({ filter: '.ccskills' });
var $optionSets = $('#library-options .option-set'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return false;
}
var $optionSet = $this.parents('.option-set');
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
// make option object dynamically, i.e. { filter: '.my-filter-class' }
var options = {},
key = $optionSet.attr('data-option-key'),
value = $this.attr('data-option-value');
// parse 'false' as false boolean
value = value === 'false' ? false : value;
options[ key ] = value;
$container.isotope( options );
return false;
});
// using the 'chozen' plugin to style my select element
$(".chzn-select").chosen().change(
function() {
var industry = $("option:selected", this).val();
$container.isotope({filter: industry});
}
);