0

私は wookmark JS を使用してコンテンツを表示しています。フィルタリングは正常に機能しますが、Jquery はあまり熱くありません。特定のナビゲーション リンクまたはページから移動するときに、相対的にフィルター処理されたアイテムを読み込む必要があります

プロトタイプ ページへのリンクは次のとおりです: http://cumminganderton.designnut.co.uk/projects.html

ユーザーがドロップダウンまたはホームページから関連するリンクをクリックしたときにオブジェクトに data-filter-class を渡すにはどうすればよいですか?ドロップダウンで「教育」をクリックすると、ページをロードするときに、 「教育」表示のデータクラス?

私は何日も探していましたが、解決策が見つからないようです..気が狂っています。

誰かが助けてくれることを願っています。

乾杯

4

1 に答える 1

0

再読み込みまたはリンクされたときに JavaScript によってトリガーされる変更をページに適用する場合、URL には、読み込み時にフィルターを適用するように Javascript に指示する何かを含める必要があります。ページのhash場所の は、これを行う最も一般的な方法です。

少し分解してonClickFilter、ページの場所のハッシュを変更することをお勧めします。

    var onClickFilter = function(event) {
      updateWithFilterElement($(event.currentTarget));
    }

    var updateWithFilterElement = function(item) {
      var activeFilters = [];

      if (!item.hasClass('active')) {
        filters.removeClass('active');
        location.hash = '';
      }
      item.toggleClass('active');

      // Filter by the currently selected filter
      if (item.hasClass('active')) {
        activeFilters.push(item.data('filter'));
        location.hash = item.data('filter');
      }

      handler.wookmarkInstance.filter(activeFilters);
    };

これで、ユーザーがフィルターをクリックすると、後で使用できるように URL に保存されます。画像を読み込んでマウス イベントを設定したら、場所にハッシュがある場合にフィルターを変更するコードを追加できます。

if (location.hash != '') {
  updateWithFilterElement($("*[data-filter='" + location.hash + "']"));
}

フィルタリングを試みる前に、そのような要素が実際に存在することを確認するために、エラーチェックを追加する必要があります。

于 2014-05-08T22:49:30.137 に答える