Javascript Wordpress的过滤插件-需要以过滤结果为目标页面

Javascript Wordpress的过滤插件-需要以过滤结果为目标页面,javascript,wordpress,plugins,divi,Javascript,Wordpress,Plugins,Divi,首先,我应该指出,我根本没有JS方面的经验,但我确实掌握HTML、CSS等方面的知识 我正在使用Divi builder为一位房地产开发商的客户创建一个Wordpress网站。他们希望通过使用下拉菜单更改的过滤器来显示他们的开发 我已经找到了一个将过滤成类别(例如,现在可用的类别和即将到来的类别),但我需要直接从网站上其他地方的链接过滤网页的目标。例如,当我点击“查看所有可用房屋”时,我需要链接直接转到相关页面,并显示已应用“现在可用”过滤器的过滤结果 我需要能够针对已经应用过滤结果的页面-类似

首先,我应该指出,我根本没有JS方面的经验,但我确实掌握HTML、CSS等方面的知识

我正在使用Divi builder为一位房地产开发商的客户创建一个Wordpress网站。他们希望通过使用下拉菜单更改的过滤器来显示他们的开发

我已经找到了一个将过滤成类别(例如,现在可用的类别和即将到来的类别),但我需要直接从网站上其他地方的链接过滤网页的目标。例如,当我点击“查看所有可用房屋”时,我需要链接直接转到相关页面,并显示已应用“现在可用”过滤器的过滤结果

我需要能够针对已经应用过滤结果的页面-类似于:/?filter=现在可用,但目前不起作用

不幸的是,这个插件的开发人员现在无法修复它,所以我想看看是否有办法获得一些帮助并自己修复它?或者是需要完全重写代码的复杂问题

由于没有JS经验,我真的不知道这是否是一个简单的修复,但我已经为下面的下拉菜单和过滤器提供了代码

以下是下拉菜单的JS:

    jQuery(function() {
  
    /* toggle open class */
  jQuery('.dv-dropdown > .caption').on('click', function() {
    jQuery(this).parent().toggleClass('open');
    jQuery('.dv-dropdown > .caption').not(this).parent().removeClass('open');
  });
  
  /* make item active element and add to caption */
  jQuery('.dv-dropdown > .list > .item').on('click', function() {
    jQuery(this).siblings().removeClass('selected');
    jQuery(this).addClass('selected').parent().parent().removeClass('open').children('.caption').text( jQuery(this).text() );
  });
  
    /* close dropdown if Esc is clicked on keyboard */
  jQuery(document).on('keyup', function(evt) {
    if ( (evt.keyCode || evt.which) === 27 ) {
      jQuery('.dv-dropdown').removeClass('open');
    }
  });
  
    /* on click remove, close dropdown */
  jQuery(document).on('click', function(evt) {
    if ( jQuery(evt.target).closest(".dv-dropdown > .caption").length === 0 ) {
      jQuery('.dv-dropdown').removeClass('open');
    }
  });

  
});
以下是过滤器的JS:


  var activeClasses = [];

jQuery(function() {

  jQuery('.dv-dropdown .df-button').on('click', function() {

    // get number of dropdown
    var dvIndex = jQuery(this).closest(".dv-dropdown").index(".dv-dropdown");

    // if active classes are defined
    if (activeClasses[dvIndex] != "") {
      // remove active classes
      jQuery('.dv-dropdown:not(:eq(' + dvIndex + ')) .df-button').each(function() {
        jQuery(this).removeClass(activeClasses[dvIndex]);
      });
      
      // empty active classes array
      activeClasses[dvIndex] = "";
    }

    // get button classes
    var filterClasses = jQuery(this).attr('class').split(/\s+/);

    // for each filter class, remove the one not starting with dfc-
    filterClasses = jQuery.grep(filterClasses, function(element) {
      return element.indexOf("dfc-") === 0;
    });

    // remove all other active classes from button 
    jQuery.each(activeClasses, function( index, value ) {
      // remove active classes from other dropdowns
      if(index !== dvIndex) {
        filterClasses = filterClasses.filter(e => e !== activeClasses[index]);
      }
    });

    // undefined if you click on all, because no class then just remove
    if (filterClasses[0] != undefined) {

      activeClasses[dvIndex] = filterClasses[0];

      jQuery('.dv-dropdown:not(:eq(' + dvIndex + ')) .df-button').each(function() {
        jQuery(this).addClass(activeClasses[dvIndex]);
      });
    }

    // add active button class dv-activebutton
    jQuery.each(activeClasses, function( index, value ) {
      // remove classes 
      jQuery(".dv-dropdown:eq(" + index + ") .df-button").removeClass("dv-activebutton");

      // add it to active element
      if(value !== "" && typeof value !== 'undefined') {
        jQuery(".dv-dropdown:eq(" + index + ") .df-button." + value).addClass("dv-activebutton");
      }
      else {
        jQuery(".dv-dropdown:eq(" + index + ") .df-button.dv-all").addClass("dv-activebutton");
      }
    });

  });

});
  
  
我认为这可能与代码加载页面内容的顺序有关,但我不确定

我完全理解这可能更复杂,需要的不仅仅是代码的快速修复,但由于我非常渴望修复它,所以值得提出这个问题。我很难说出需要做什么,因为我根本不知道如何处理JS


在此方面的任何帮助都将不胜感激。谢谢。

更多信息。如果我浏览到一个过滤过的页面,并在页面加载后手动删除URL后面的?filter=部分,那么它将加载正确的过滤内容。显然,我需要在页面加载后立即显示过滤后的内容。