Question

我通过选择框＆amp ;;过滤同位素列表的DIV。 URL哈希。我正在使用the Isotope website examples

上提供的代码示例

请查看下面JSFiddle中的代码。

在我的用例中，URL哈希filter=被doelgroep=取代。出现两个问题。

默认情况下，所有项目都在页面加载时隐藏。我想在页面加载后显示所有内容。
每次直接导航到特定的url哈希时都会发生JavaScript错误。 jQuery.min.js：2未捕获错误：语法错误，无法识别的表达式：[value = doelgroep = gemeente-of-ocmw]

请您帮我弄清楚如何在加载页面时显示所有项目，或者没有选择--？另外，你能帮我找出这个JavaScript错误的来源吗？

请在这个JSFiddle上找到工作代码： https://jsfiddle.net/5Ls0q026/

您还可以在其测试位置上看到它的运行情况： http://curaedis.chocolata.be/diensten

Answer 1

如果我们应该按照您的方式使用：

变种№1

if($('.items').length) {
    function getHashFilter() {
        var matches = location.hash.match(/doelgroep=([^&]+)/i);
        var hashFilter = matches && matches[1];
        return hashFilter && decodeURIComponent(hashFilter);
    }
    $(function() {
        var $grid = $('.items');
        // bind filter button click
        var $filters = $('#filters').on('change', function() {
            var filterAttr = $(this ).val();
            // set filter in hash
            location.hash = 'doelgroep=' + encodeURIComponent( filterAttr );
        });
        function onHashchange() {
            var hashFilter = getHashFilter() || "*";
            // filter isotope
            $grid.isotope({
                itemSelector: '.item',
                filter: hashFilter != "*" ? "." + hashFilter : hashFilter
            });
        }
        $(window).on( 'hashchange', onHashchange );
        // trigger event handler to init Isotope
        onHashchange();
    });
}

工作副本 - https://jsfiddle.net/5Ls0q026/1/

如果要正常使用，那么你应该在选项中加点

变体№2

<option value=".zorgverstrekkende-organisatie" 
        data-filter=".zorgverstrekkende-organisatie">zorgverstrekkende organisatie
</option>

工作副本 - https://jsfiddle.net/5Ls0q026/2/

并替换您的onHashchange功能

function onHashchange() {
    var hashFilter = getHashFilter();
    // filter isotope
    $grid.isotope({
        itemSelector: '.item',
        filter: hashFilter
    });
}

变体2解释了您的错误。您尝试解析哈希，并在任何哈希后添加了点。因此，当您获得null或*时，您确实获得了.null和.*

使用选择框和url hash

1 个答案:

变种№1

变体№2