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

Question

我的目标是无需单击过滤器按钮即可过滤产品。 （我正在使用wordpress） the_widget( 'WC_Widget_Price_Filter')

首先，我想通过在mouseout上触发Filter按钮来在jQuery上使用mouseout函数。

不幸的是，我无法让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>

Answer 1

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

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

因此，使用on（）函数有效，并且万事俱备！