0

SCENARIO The web app workflow is the following:

  1. Someone clicks on a a href element into a page. http://example.org/
  2. The link is followed and then another page within the site is reached. http://example.org/page-2/
  3. The link URL also contains a hash var.

(This hash var is what I intended to use in order to achieve the next point)

  1. There is a content grid that must show the wanted part, this object was built with an out of the box CMS, so I preferably don't want to modify it. This also, only works when the user clicks on the very button filter.

(This filter is based entirely on events and not on "GUI visible" locations, thus I'm not able to call for an specific filter from the very url, the previous object -there was a previous object, yes- worked really good with hashes from URL, but the new doesn't.)

  1. The content grid filter elements don't have any ids, they just have a data custom attribute to be identified.

And that's it.

The workaround is intended to be like this:

  $( window ).load(function() {
      var filter = window.location.hash.substr(1);
      if(filter == "keywordA") {
        $('a[data-filter=".cat-1"]').trigger('click');
      }
      if(filter == "keywordB"){
        $('a[data-filter=".cat-2"]').trigger('click');
      }
      if(filter == "keywordC"){
        $('a[data-filter=".cat-3"]').trigger('click');
      }
      if(filter == "keywordD"){
        $('a[data-filter=".cat-4"]').trigger('click');
      }
      if(filter == "keywordE"){
        $('a[data-filter=".cat-5"]').trigger('click');
      }
  });

Then, dark and unknown forces comes into place, because when I enter this in the address bar: http://example.org/page-2/#keywordD the DOM works well, as expected. The content grid displays exactly what I want.

But when I try to reach the same link but from an a href element within http://example.org/ it just doesn't do anything at all.

FURTHER EXPLANATION

I used window.load because that way the function is forced to be executed once everything is settled in the DOM, and after every single code instance of $(document).ready() functions, because the website already works with many of these.

4

2 回答 2

1

答案

不知何故，我在附加处理程序之前触发了事件，尽管 window.load 事件据说是为了在所有 DOM 完全加载时触发函数。

https://stackoverflow.com/a/2060275/1126953

向诺亚致敬。

根据先前的答案，我可以设法设置所需的行为，如下所示：

$( window ).load(function() {
   setTimeout(function() {
      var filter = window.location.hash.substr(1);
      if(filter == "keywordA") {
        $('a[data-filter=".cat-1"]').trigger('click');
      }
      if(filter == "keywordB"){
        $('a[data-filter=".cat-2"]').trigger('click');
      }
      if(filter == "keywordC"){
        $('a[data-filter=".cat-3"]').trigger('click');
      }
      if(filter == "keywordD"){
        $('a[data-filter=".cat-4"]').trigger('click');
      }
      if(filter == "keywordE"){
        $('a[data-filter=".cat-5"]').trigger('click');
      }
    },10);
  });

只是一个简单的延迟。

非常感谢您抽出时间 Stefan。

于 2016-08-30T04:17:10.170 回答
1

问题出在： 当从链接http://example.org/page-2/#导航到相同页面但具有不同哈希变量的不同链接时，例如http://example.org/page -2/#keywordD，网站实际上并没有重新加载。这是默认行为，因为它旨在跳转到页面上具有哈希 id 的元素。

幸运的是，网站上有一个哈希更改事件。

'onhashchange'

现在根据您的过滤工作方式，您可能想要调用一个执行所有过滤的函数（在加载页面时执行该过滤的函数），或者，如果这是服务器端 CMS 的事情，您可能想要重新加载页。

$(window).bind('hashchange', function(e) {
    // Enter your filter function here
    doFiltering();
});

或者如果重新加载页面更合适。

$(window).bind('hashchange', function(e) {
    document.location.reload();
});

我不太明白你所说的“这个过滤器完全基于事件而不是'GUI可见'位置”是什么意思，所以如果我误解了你，你可能想在评论中详细说明一下，但我希望要么这些解决方案之一适合您。

于 2016-08-29T22:25:37.077 回答