1

チェックボックスコンボフィルター（jquery UIでスタイル設定）、グループ、およびハッシュ履歴を使用して、製品ソー​​トマトリックスとして機能するアイソトープを持っています。全体として、すべてが期待どおりに機能しており、結果は非常に優れています。特定のチェックボックスに基づいてフィルター結果を再ソートする必要があるという問題に遭遇しました。ここでフィドルを見ると：http://jsfiddle.net/rwbennet/B8kV3/2/あなたは私の結果を見ることができます。問題は、チェックボックスまで下にスクロールして「ウェルネス インセンティブ」を選択した場合、「Mastercard」タグの付いたすべての結果が結果の最初に来るようにする必要があることです。したがって、基本的な並べ替えはすべてアルファベット順であり、いくつかのチェックボックスを選択すると結果はアルファベット順のままになりますが、「用途」の 1 つとして「ウェルネス インセンティブ」を選択すると、結果は再並べ替えされ、「Mastercard」で始まります。 " 結果。他にも例外はありますが、これはほんの一例です。ここで説明していることをアイソトープに組み込む方法はありますか? この問題についてご検討いただきありがとうございます。

現在、私の同位体コードは次のとおりです。

 var $container = $('#container');
 var $filterDisplay = $('#filter-display');

 // Initiate Isotope and pass in hash change filter
 $container.isotope({
    filter: hashfilter
 });

 if( location.hash != "" ){
   var hashfilter = location.hash.substr( 1 );
 } else {
   var hashfilter = "*";
 }

 var filters = {};

 isOptionLinkClicked = false;

 $('#options').on( 'change', function( jQEvent ) {

   var checkbox = jQEvent.target;
   var $checkbox = $( checkbox );
   var value = checkbox.value;
   var group = $checkbox.parents('.option-set').attr('data-group');

   // create array for filter group, if not there yet
   if ( !filters[ group ] ) {
     filters[ group ] = [];
   }

var index = $.inArray( checkbox.value, filters[ group ] );

if ( checkbox.checked ) {
  var selector = 'input';
  $checkbox.siblings( selector ).removeAttr('checked');


  if ( index === -1 ) {
    // add filter to group
    filters[ group ].push( checkbox.value );
    isOptionLinkClicked = true;
    $(this).data('clicked', true);
    //console.log($(this).data());
  }

  } else {
    // remove filter from group
    filters[ group ].splice( index, 1 );

  }


   var i = 0;
   var comboFilters = [];

  for ( var prop in filters ) {
    var filterGroup = filters[ prop ];

    // skip to next filter group if it doesn't have any values
    if ( !filterGroup.length ) {
      continue;
    }

    if ( i === 0 ) {
      // copy to new array
      comboFilters = filterGroup.slice(0);

    } else {

    var filterSelectors = [];

    // copy to fresh array
    var groupCombo = comboFilters.slice(0); // ex: [ A, B ]

    // merge filter Groups
    for (var k=0, len3 = filterGroup.length; k < len3; k++) {

      for (var j=0, len2 = groupCombo.length; j < len2; j++) {
        filterSelectors.push( groupCombo[j] + filterGroup[k] ); // [ 1, 2 ]
      }

    }

    // apply filter selectors to combo filters for next group
    comboFilters = filterSelectors
  }
  i++

  location.hash = comboFilters.join(', ');

  var hashObject = location.hash.replace( /^#/, '' );

  //return false;
}

$container.isotope({ filter: comboFilters.join(', ') });

// Helpful for messing with hashchange URLs
//$filterDisplay.text( comboFilters.join(', ') );

});

var hashObject = location.hash.replace( /^#/, '' );
var hashChanged = false;

$(window).bind( 'hashchange', function( event ){

if(location.hash != "") {
    var hashfilter = location.hash.substr(1);
} else {
    var hashfilter = "*";
}

$container.isotope({
    filter: hashfilter
});

})

// trigger hashchange to capture initial hash options
.trigger( 'hashchange' );

// trigger ui clicks to mirror initial hash options
var strHash = location.hash.substr(1); // Get our url hash
var arHash = strHash.split(" ").join("").split(",").join("").split("."); 
// get rid of the spaces, commas, and conver to an array
var arHashUnique = Array(); // remove duplicates from the array
$.each(arHash, function(i, item){
   if($.inArray(item, arHashUnique) === -1 && item != "") 
   {
      arHashUnique.push(item);
   }
});

for(var i in arHashUnique) // click the appropriate filters {
  $("#" + arHashUnique[i]).click();
}
4

0 に答える 0