如何解决Wordpress 过滤插件 - 需要使用过滤结果定位页面
首先我要指出的是,我根本没有 JS 经验,但我确实有 HTML、CSS 等方面的知识。
我正在使用 Divi builder 为房地产开发商客户构建一个 Wordpress 网站。他们希望使用过滤器展示他们的发展,过滤器可以使用下拉菜单进行更改。
我找到了一个 plugin,它可以按类别进行过滤(例如,“现在可用”类别和“即将推出”类别),但我需要直接从网站上其他地方的链接中定位过滤后的页面。例如,当我点击“查看所有可用房屋”时,我需要该链接直接转到相关页面并显示应用了“立即可用”过滤器的过滤结果。
我需要能够定位已应用过滤结果的页面 - 类似于:/?filter=available-now,但目前不起作用。
不幸的是插件的开发者现在无法修复它,所以我想看看是否有办法获得一些帮助并自己修复它?或者是需要完全重写代码的复杂事情?
没有 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,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。
对此的任何帮助将不胜感激。谢谢。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。