小部件价格过滤器不适用于 jquery答案

【问题标题】：widget price filter won't work with jquery小部件价格过滤器不适用于 jquery
【发布时间】：2018-12-04 15:16:23
【问题描述】：

我的目标是在不点击过滤器按钮的情况下过滤产品。（我正在使用wordpress） the_widget( 'WC_Widget_Price_Filter')

首先，我想在 jQuery 上使用 mouseout 功能，通过在 mouseout 上触发 Filter 按钮。

很遗憾，我无法让 jquery 触发滑块。

为了简单起见，我只想让元素（滑块）先隐藏。

$('.widget_price_filter .ui-slider .ui-slider-handle:last-child').hide();
$('.widget_price_filter').hide();
$('span.widget_price_filter.ui-slider.ui-slider-handle:last-child').hide();

但没有运气。没有一个滑块隐藏。

显然，当我通过 css 添加它时。

.widget_price_filter .ui-slider .ui-slider-handle:last-child {
display: none;
}

这隐藏了滑块句柄。所以我知道我的目标是正确的课程。有没有办法通过 jquery 或 javascript 来触发这些滑块？

我知道这不是实现这一目标的最佳方式。所以我也愿意接受其他建议。

这是the_widget( 'WC_Widget_Price_Filter')产生的代码

<div class="widget woocommerce widget_price_filter">
    <form method="get" action="http://site.local/shop/">
        <div class="price_slider_wrapper">
            <div class="price_slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" style="">
                <div class="ui-slider-range ui-widget-header ui-corner-all" style="left: 0%; width: 100%;"></div>
                <span class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0" style="left: 0%;"></span>
                <span class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0" style="left: 100%;"></span>
            </div>
            <div class="price_slider_amount">
                <input type="text" id="min_price" name="min_price" value="1" data-min="1" placeholder="Min price" style="display: none;">
                <input type="text" id="max_price" name="max_price" value="25" data-max="25" placeholder="Max price" style="display: none;">
                <button type="submit" class="button">Filter</button>
                <div class="price_label" style="">
                    Price: <span class="from">$1</span> — <span class="to">$25</span>
                </div>
                <div class="clear"></div>
            </div>
        </div>
    </form>
</div>

【问题讨论】：

对！我更新了我的帖子，它是 WordPress。
“它是 WordPress” 毫无意义。这并没有告诉我们有关此过滤器小部件背后的代码的任何信息。请提供minimal reproducible example
那么在输入中添加一个更改处理程序？
提供相当的 HTML。关于过滤 - 你应该使用$('.widget_price_filter').on('change', function(event){})
@AdrianRoyBaguio 尝试来自官方文档的示例：jqueryui.com/slider/#range 这里使用了更改处理程序：jqueryui.com/slider/#colorpicker

标签： jquery html wordpress

【解决方案1】：

$('.price_slider').on('mouseout', function(event){
 $('.price_slider_amount button.button').trigger( "click" );
});

感谢@Zydnar 先生。我意识到 WC_Widget_Price_Filter 是在页面加载后创建的。因此，单独的 .click() 函数将不起作用。

因此，使用 on() 函数可以正常工作，而且现在可以正常工作了！

【讨论】：