如何链接到另一个页面上的jQuery过滤视图并选择默认过滤器?

时间:2018-07-26 12:50:11

标签: javascript jquery html

抱歉,我的知识和语言。我在jQuery中有两个连接的过滤器,我希望能够从其他页面链接到特定的过滤器视图。我知道我可能必须使用window.location.hash,但我不知道如何。

第二个问题-如何添加默认过滤器?我希望将ONEWashington作为默认选择的过滤器。

非常感谢任何帮助

$("button").click(function() {
  //remove the selected class from the previously selected button
  $(this).closest('.filter').find('button.selected').removeClass('selected');
  //put the class on the button you clicked
  $(this).addClass('selected');
  
  //get the data-filter off of the selected buttons and join them into a selector
  var filter = '.'+ $('button.selected').map(function(){
    return $(this).data('filter');
  }).get().join('.');
  
  //hide all the posts, and then show those that match
  $('.post').hide().filter(filter).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>FIRST</h2>
<!-- we use a class because an id cannot be repeated
     and we want to select both our filters later -->
<div class='filter'>
    <!-- data fields let us separate the classes from the data that
         is used for the filter -->
    <button data-filter='all'>All</button>
    <button data-filter='1'>One</button>
    <button data-filter='2'>Two</button>
</div>
<h2>TWO</h2>
<div class='filter'>
    <button data-filter='all'>All</button>
    <button data-filter='aa'>Washington</button>
    <button data-filter='bb'>Philadelphia</button>
</div>

<br>
<div id='posts'>
    <div class='all post 1 aa'>One Washington</div>
    <div class='all post 1 bb'>One Philadelphia</div>
    <div class='all post 2 bb'>Two Philadelphia</div>
    <div class='all post 2 aa'>Two Washington</div>
    <div class='all post 1 bb'>One Philadelphia</div>
    <div class='all post 2 aa'>Two Washington</div>
    <div class='all post 1 bb'>One Philadelphia</div>
</div>

0 个答案:

没有答案