链接页面加载时,使用jQuery / Javascript从外部链接应用过滤器功能

前端之家收集整理的这篇文章主要介绍了链接页面加载时,使用jQuery / Javascript从外部链接应用过滤器功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这是我在这里提到的问题的延伸: Owl Carousel 2: filtering items,but keep the sort order using Javascript(希望这样可以)

我有一个过滤项目的菜单.我想要从点击和外部页面链接应用过滤器.因此,在第X页上,您单击FilterA,将您引导到Y页面,并将项目过滤到FilterA,就像您刚刚点击过滤器一样.

在理想的世界里,它只会使用一个链接,如www.mysite.com/pageY/#filterA.

您可以在这里查看实时页面http://bit.ly/1GaL4np

这是过滤功能

  1. $(document).ready(function () {
  2. function showProjectsbyCatEur(cat) {
  3. var owl = $(".owl8").data('owlCarousel');
  4.  
  5. owl.addItem('<div/>',0);
  6.  
  7. var nb = owl.itemsAmount;
  8. for (var i = 0; i < (nb - 1); i++) {
  9. owl.removeItem(1);
  10. }
  11.  
  12. if (cat == 'all8') {
  13. $('#projects-copy8 .project8').each(function () {
  14. owl.addItem($(this).clone());
  15. });
  16. } else {
  17. $('#projects-copy8 .project8.' + cat).each(function () {
  18. owl.addItem($(this).clone());
  19. });
  20. }
  21. owl.removeItem(0);
  22. }
  23. $('.owl8 .project8').clone().appendTo($('#projects-copy8'));
  24. $('#project-terms8 a').click(function (e) {
  25. e.preventDefault();
  26. $('#project-terms8 a').removeClass('active');
  27.  
  28. cat = $(this).attr('ID');
  29. $(this).addClass('active');
  30. showProjectsbyCatEur(cat);
  31. });
  32. });

我的过滤器菜单如下所示:

  1. <div id="filter">
  2. <h1 class="title">Eurorack</h1>
  3. <div id="project-terms8">
  4. <ul class="filter">
  5. <li class="filter"><a id="all8" class="active all" onclick="event.preventDefault();" href="#">Show All</a></li>
  6.  
  7. <li class="filter 3x"><a id="3x" onclick="event.preventDefault();" href="#">Clocks,Logic &amp; CV</a></li>
  8.  
  9. <li class="filter 2x"><a id="2x" onclick="event.preventDefault();" href="#">Filters &amp; Resonators</a></li>
  10.  
  11. <li class="filter 1x"><a id="1x" onclick="event.preventDefault();" href="#">Waveform Modifiers</a></li>
  12.  
  13. </ul>
  14. </div>

所以迄今为止的答案是有帮助的,但并不完全解决我的问题.如果有任何人有任何建议将是伟大的!似乎使用#没有帮助,因为过滤器使用id,这只是创建锚点到过滤器,所以/?filter = FILTERITEM将是最好的.

或者,新的过滤系统会很好.只要排序顺序保持不变,这可以与URL和按钮一起使用.

解决方法

您可以使用javascript获取一个url参数,并在过滤器中使用该参数.
  1. function getURLParameter(name) {return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g,'%20'))||null

}

  1. var filter= getParameterByName('filter');
  2. showProjectsbyCatEur(filter);

然后使链接像“www.mysite.com/pageY/?filter=euro”.

猜你在找的jQuery相关文章