javascript - 根据 URL 查询字符串参数过滤 ilightbox 投资组合项目

Question

我有一个网站，它使用带有过滤器的投资组合来定义显示哪些图像。相关的 JavaScript 是(我相信)如下所示:

    if( $element.hasClass( 'filterable-entries' ) ){
            $( '.cl-filters' ).on( 'click', 'button', function() {
                var filterValue = $(this).attr('data-filter');
                if( filterValue != '*' )
                    $element.isotope({
                        filter: filterValue,
                        sortBy: 'random'
                    }); 
                else
                    $element.isotope({
                            filter: filterValue,
                            sortBy: 'original-order'
                    }); 
                            
                CL_FRONT.restartAnimations( $element );
                $element.isotope('arrange');
    
                $(this).parent().find('button.selected').removeClass('selected');
                $(this).addClass('selected');

            });
    }

过滤器使用上面在生成的 HTML 中提到的“数据过滤器”(我无法编辑):

<div class="inner">
    <button data-filter="*" class="selected">All 2</button>
    <button data-filter=".portfolio_entries-abstract">Abstract</button>
    <button data-filter=".portfolio_entries-animal">Animal</button>
    <button data-filter=".portfolio_entries-famous-reproductions">Famous Reproductions</button>
    <button data-filter=".portfolio_entries-flower-tree">Flower & Tree</button>
    <button data-filter=".portfolio_entries-landscape">Landscape</button>
    <button data-filter=".portfolio_entries-modern-art">Modern Art</button>
    <button data-filter=".portfolio_entries-portrait">Portrait</button>
</div>

我需要制作 var filterValue = $(this).attr('data-filter');以某种方式从查询字符串中获取值以应用过滤器， 但没有停止当前按钮过滤器的工作 .例如，如果 URL 包含 ?filter=abstract (或任何特定值)然后它将应用 .portfolio_entries-abstract如 filterValue .但是，由于该功能似乎是由使用 $( '.cl-filters' ).on( 'click', 'button', function() { 的按钮单击触发的。我不确定这怎么可能。
过滤器还需要仍然应用类 selected到适当的过滤器按钮，并确保它没有应用于任何其他按钮，就像当前使用按钮时所做的那样。
示例场景:用户访问 URL mysite.com?filter=abstract 的站点并显示过滤后的图库，其中相关按钮由 .selected 类突出显示。然后，用户使用按钮更改过滤器以查看不同的类别并照常进行 - 不需要以任何方式保留原始过滤器。
这是一个 WordPress/WooCommerce 网站，所以是基于 PHP 的，但是这个 JavaScript 包含在主题文件中作为 .js 而不是 .php 所以我不能只使用 $_SERVER['QUERY_STRING']; ，无论如何我都不知道在这种情况下该怎么办......

Answer 1

我解决了! :)
逻辑是:

使用 sessionStorage 检查用户是否在此 session 中第一次加载页面，如果不是，则只需像平常一样使用按钮过滤而不是 URL 过滤器。

使用 URLSearchParams(window.location.search) 获取查询字符串

使用 .has 从查询字符串中获取特定参数来自 URLSearchParams (如果存在，否则只需正常使用按钮过滤)

然后将参数值用作过滤器(通过将前导 . 附加到值)和 .selected CSS 类(通过使用 $(document).find 和查询字符串中的参数值。

if( $element.hasClass( 'filterable-entries' ) ){     
 if (sessionStorage.alreadyRun2 != "true")
     var params = new URLSearchParams(window.location.search);
       if (params){
         if (params.has('filter') == true){  
             var filter = params.get('filter');                      
             var filterValue = "." + filter;
             if( filterValue != '*' ){
                 $element.isotope({
                     filter: filterValue,
                     sortBy: 'random'
                 }); 
             }
             else {
             $element.isotope({
                    filter: filterValue,
                    sortBy: 'original-order'
             }); 
             }

             CL_FRONT.restartAnimations( $element );
             $element.isotope('arrange');

             $(document).find('button.selected').removeClass('selected');
             $(document).find("[data-filter=" + CSS.escape(filterValue) + "]").addClass('selected');
        }
     } else {
         $( '.cl-filters' ).on( 'click', 'button', function() {
         var filterValue = $(this).attr('data-filter');
             if( filterValue != '*' ){
             $element.isotope({
                 filter: filterValue,
                 sortBy: 'random'
             }); 
             }
         else {
             $element.isotope({
                    filter: filterValue,
                    sortBy: 'original-order'
             });
         }

         CL_FRONT.restartAnimations( $element );
         $element.isotope('arrange');

         $(this).parent().find('button.selected').removeClass('selected');
         $(this).addClass('selected');
         });
     }
     sessionStorage.alreadyRun2 = "true";

     $( '.cl-filters' ).on( 'click', 'button', function() {
         var filterValue = $(this).attr('data-filter');
         if( filterValue != '*' )
             $element.isotope({
                 filter: filterValue,
                 sortBy: 'random'
             }); 
         else
             $element.isotope({
                     filter: filterValue,
                     sortBy: 'original-order'
             }); 

         CL_FRONT.restartAnimations( $element );
         $element.isotope('arrange');

         $(this).parent().find('button.selected').removeClass('selected');
         $(this).addClass('selected');

     });
 }

它需要在同一个文件中添加其他几个地方，但逻辑是一样的。