3

私は現在 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});
    }
);
4

1 に答える 1