加载页面时,根据哈希值激活选中的mixitup过滤器复选框

时间:2019-07-05 17:17:35

标签: url checkbox filter hash mixitup

我有以下代码用于哈希mixitup过滤器的结果。您可以在以下位置查看工作示例: https://demos.kunkalabs.com/mixitup/filtering-by-url/

我需要的是在页面加载时显示正确的复选框。

任何帮助将不胜感激。

<script>


            var targetSelector = '.mix';



            function getSelectorFromHash() {
                var hash = window.location.hash.replace(/^#/g, '');

                var selector = hash ? '.' + hash : targetSelector;

                return selector;
            }



            function setHash(state) {
                var selector = state.activeFilter.selector;
                var newHash = '#' + selector.replace(/^\./g, '');

                if (selector === targetSelector && window.location.hash) {
                    // Equivalent to filter "all", remove the hash

                    history.pushState(null, document.title, window.location.pathname); // or history.replaceState()
                } else if (newHash !== window.location.hash && selector !== targetSelector) {
                    // Change the hash

                    history.pushState(null, document.title, window.location.pathname + newHash); // or history.replaceState()
                }
            }

            // Instantiate and configure the mixer

            var mixer = mixitup('.container', {
                selectors: {
                    target: targetSelector
                },
                load: {
                    filter: getSelectorFromHash() // Ensure that the mixer's initial filter matches the URL on startup
                },
                callbacks: {
                    onMixEnd: setHash // Call the setHash() method at the end of each operation
                }
            });



            window.onhashchange = function() {
                var selector = getSelectorFromHash();

                if (selector === mixer.getState().activeFilter.selector) return; // no change

                mixer.filter(selector);
            };
</script>

0 个答案:

没有答案