Javascript jQuery，在更改时运行函数

我有这个价格滑块，我希望它在滑块发生变化时运行某个函数。我想在滑块处更改时运行函数过滤器

滤波器比函数

<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>

函数filterBy（）{
$（'.searchtable'）.addClass（'hide'）；
$（'.spinner'）.removeClass（'hide'）；
$.ajax({
键入：“GET”，
数据：{'name'：''，'arrival'：''，'Behavior'：''，'guests'：''，'minRate'：$（“#amount”）.val（$（“#滑块范围”）.slider（“值”，0），'propertyCategory'：$（“#hotelType input[type='checkbox']：checked”）.val（），'minStarRating'：$（“#hotelRating input[type='checkbox']：checked”）.val（），“便利设施”：（$”，“HotelManities input[type='checked'：checked]，
url:“/hotels/hotelFilterResult.php”，
成功：功能（数据）{
警报（“数据加载成功”）；
警报（this.url）；
$（'.searchtable'）。替换为（数据）；
$（'.spinner'）.addClass（'hide'）；
$（'.searchtable'）.removeClass（'hide'）；
},
错误：函数（xhr）{
警报（“未加载数据”）；
}
});
}

滑块的功能：

<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>

$（函数（）{
$（“#滑块范围”）。滑块({
范围：对，
分:0,，
最高：5000，
数值：[5002000]，
幻灯片：功能（事件、用户界面）{
$（“#金额”）.val（ui.values[0]+“kr”+“-”+ui.values[1]+“kr”）；
},
更改：功能（事件、用户界面）{
filterBy（）；
}
});
$（“#金额”）.val（$（“#滑块范围”）.slider（“值”，0）+“kr”+
“-”+$（“#滑块范围”）。滑块（“值”，1）+“kr”）；
});

我想在更改时运行的函数是filterBy（）

---

如何做到这一点？

使用

.change

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

这就是你的问题。parantesses正在执行

filterBy

函数，并将

filterBy

的结果传递给change函数（如果你不

返回
任何内容，则该函数可能是
未定义的）。你想要的是将
filterBy
函数直接传递给
change（）
功能如下：

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

function filterBy(event) {
   // do stuff when the slider changes
} 

要收听滑块事件，您需要提供
change
configuration选项：

$("#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();
});

我刚刚在我的答案中添加了
change
方法，但是在我完成之前，你发布了+1，这可能是OP想要的，而不是滑动时不断触发的
slide
处理程序。
$("#slider-range").on("slidechange", function(event, ui) {
    filterBy();
});