Question

我有这个价格滑块，我希望它在滑块更改时运行某个功能。我想在滑块更改时运行函数filterBy。

filterBy函数

<script>
function filterBy() { 
$('.searchtable').addClass('hide');
$('.spinner').removeClass('hide');

$.ajax({
        type: 'GET',
        data: {'name':'<?php echo strval($_GET['name']); ?>','arrival':'<?php echo strval($_GET['arrival']); ?>','departure':'<?php echo strval($_GET['departure']);?>','guests':'<?php echo strval($_GET['guests']);?>','minRate':$( "#amount" ).val( $( "#slider-range" ).slider( "values", 0 ),'propertyCategory':$("#hotelType input[type='checkbox']:checked").val(),'minStarRating':$("#hotelRating input[type='checkbox']:checked").val(),'amenities':$("#hotelAmenities input[type='checkbox']:checked").val()},
        url: '<?php echo $baseUrl ?>/hotels/hotelFilterResult.php',


        success: function (data) {
            alert('data loaded succesfully');
            alert(this.url);

            $('.searchtable').replaceWith(data);
            $('.spinner').addClass('hide');
            $('.searchtable').removeClass('hide');

        },
        error: function (xhr) {
            alert('data not loaded');
        }
  });

}
</script>

滑块功能：

<script>
$(function() {
$( "#slider-range" ).slider({
  range: true,
  min: 0,
  max: 5000,
  values: [ 500, 2000 ],
  slide: function( event, ui ) {
    $( "#amount" ).val( ui.values[ 0 ] + " kr" + " - " + ui.values[ 1 ] + " kr" );
  },
    change: function(event, ui) {
    filterBy();
}
});
$( "#amount" ).val( $( "#slider-range" ).slider( "values", 0 ) + " kr" +
  " - " + $( "#slider-range" ).slider( "values", 1 ) + " kr" );
});
</script>

我想要在更改时运行的函数是filterBy（）我该怎么做？

Answer 1

要收听滑块的slidechange事件，您需要提供change配置选项：

$("#slider-range").slider({
    range: true,
    min: 0,
    max: 5000,
    values: [500, 2000],
    slide: function (event, ui) {
        $("#amount").val(ui.values[0] + " kr" + " - " + ui.values[1] + " kr");
    },
    change: function(event, ui) {
        filterBy();
    }
});

或者，您可以明确地绑定到此事件：

$("#slider-range").on("slidechange", function(event, ui) {
    filterBy();
});

Answer 2

使用.change

$( "#slider-range" ).change(function(){
   filterBy();
});

Answer 3

$( "#slider-range" ).change(filterBy());
                                    ^^

有你的问题。 parantheses正在执行filterBy函数并将filterBy的结果传递给更改函数（如果你没有undefined可能return filterBy change() 1}}任何事情）。你想要的是将$( "#slider-range" ).change(filterBy); function filterBy(event) { // do stuff when the slider changes }函数直接传递给{{1}}函数，如下所示：

{{1}}

jQuery，在更改时运行函数

3 个答案: