Question

我正在尝试将两个ajax调用合并为一个。一个在表单中的复选框更改时触发，另一个在jQuery滑块“滑动”时触发。我想把两者结合起来。

我正在考虑使用.bind（），但我需要使用多个jQuery选择器和多个事件。

两个jQuery选择器将是：

$（ “输入[类型=复选框]”）
$（“＃pay_range”）。slider

两个不同的事件分别是

。点击（）
.slide（）

显然，不同的事件监听器必须使用正确的jQuery选择器。

复选框的js：

    // when a checkbox is clicked
    $("input[type=checkbox]").click(function() {

    // remove the original results
    $('#original_results').css("display", "none");

    // which filter section does it belong to
    var filter_section = $(this).attr('name');

    // should it be filtered out or left in
    var remove = $(this).prop('checked');

    // if needs to be filtered
    if (!remove)
    {
        // add it to our filter list for the specified section
        filters[filter_section].push(this.value);
    }
    else
    {
        // take it off the list for the specified section
        var index = filters[filter_section].indexOf(this.value);
        if (index > -1)
        {
            filters[filter_section].splice(index, 1);
        }
    }
    $.ajax({
        type: 'POST',
        url: '/results/search_filter',
        //url: url,
        beforeSend: function() {
            //Display a loading message while waiting for the ajax call to complete
            $('#filter_updating').html("Filtering your search...");
        },
        success: function(response) {
            //inject the results
            $('#search_results').html(response);
        },

        data: { filters: filters, criteria: criteria }
    }); // end ajax setup

});

滑块的js：

$(function() {
$( "#pay_range" ).slider({
    range: true,
    min: pay_min,
    max: pay_max,
    values: [ pay_min, pay_max ],
    slide: function( event, ui ) {
        $( "#filter_by_pay" ).html( "Pay Range: ¥" + ui.values[ 0 ] + " - ¥" + ui.values[ 1 ] ).css("color", "black");
        $.ajax({
            type:'POST',
            url: '/results/search_filter',
            beforeSend: function() {
                //Display a loading message while waiting for the ajax call to complete
                $('#filter_updating').html("Filtering your search...");
            },
            success: function(response) {
                //inject the results
                $('#search_results').html(response);
            },

            data: { min: ui.values[0], max: ui.values[1] }

        });
    }
});

}）;

Answer 1

您可以简化为一个功能：

 function doAjax() {
    var ranges = $('#pay_range').slider('values')
    var data = {
      min: ranges[0],
      max: ranges[1],
      filters: filters,
      criteria: criteria
    }
    /* show loading*/
    $.post('ajaxData.html',data,function(response){         
     $('#search_results').html(response);
    })
  }

然后是滑块：

$("#pay_range").slider({
      range: true,
      min: pay_min,
      max: pay_max,
      values: [pay_min, pay_max],
      stop: function(event, ui) {
        doAjax();
      }
    });

调整过滤器后，在复选框处理程序中执行相同的操作

您的代码未显示citeria来自哪里

的 DEMO

在复选框更改或jQuery slider.slide上触发的函数

1 个答案: