2015-02-23 110 views
1

我有這個價格滑塊,我希望它在滑塊更改後運行某個功能。我想在滑塊上更改時運行函數filterBy。jQuery,更改運行功能

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() 我該怎麼辦呢?

回答

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

另外,您可以explicetly綁定到這個事件:

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

我只是在我的答案中加了'change'方法,但是你之前發佈了我完成,+1,它可能比OP所尋找的更多,而不是滑動時連續觸發的「幻燈片」處理程序。 – adeneo 2015-02-23 15:28:47

0

使用.change

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

有你的問題。這些相互矛盾的執行filterBy函數並將結果filterBy傳遞到更改函數(如果您沒有return任何東西,可能是undefined)。你想要的是直接通過filterBy功能的change()功能,像這樣:

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

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