javascript - 如何自动提交价格过滤器？

Question

我正在尝试自动提交默认搜索过滤器。

<div class="price_slider_amount" data-step="10">
    <input type="text" id="min_price" name="min_price" value="70" data-min="70" placeholder="Preț Minim" style="display: none;">
    <input type="text" id="max_price" name="max_price" value="1140" data-max="1140" placeholder="Preț Maxim" style="display: none;">
    <button type="submit" class="button">Filtrează</button>
</div>

<div class="price_label" style="">

    Price: <span class="from">500&nbsp;</span> 
    —
    <span class="to">1.140&nbsp;</span>

</div>

我试过这样

$(".price_label span").change(function() {
    $(".price_slider_amount").submit();
});

Answer 1

正如我所说，处理 slider 的变化非常简单。给你:

$('.price_slider').slider();

$( ".price_slider" ).on( "slidechange", function( event, ui ) {
	console.log('Your new value: ' + ui.value)
  
  //here you can submit your form or do whatever stuff you need
} );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<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: 2.80374%; width: 97.1963%;"></div><span class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0" style="left: 2.80374%;"></span><span class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0" style="left: 100%;"></span></div>

对于这个和许多其他 slider 的功能，您应该使用 official doc .