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

【问题标题】：Function to fire on checkbox change or on jQuery slider.slide在复选框更改或 jQuery slider.slide 上触发的函数
【发布时间】：2013-12-26 03:20:51
【问题描述】：

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

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

两个 jQuery 选择器是：

$("input[type=checkbox]")
$( "#pay_range" ).slider

这两个不同的事件分别是

.click()
.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] }

        });
    }
});

});

【问题讨论】：

combine the two 是什么意思？将代码合并为一个doAjax 函数以在两个地方使用？或将事件绑定在一起？如果后者需要更多地了解复选框和滑块之间的关系
目标是进行一个 ajax 调用，其中包括来自滑块和复选框的数据——基本上是任何让我写“数据：{ min: ui.values[0], max : ui.values[1]，过滤器：过滤器，条件：标准 }"
@charlietfl 同样，复选框和滑块本身没有关系，我只需要同时来自它们的信息

标签： javascript jquery html ajax checkbox

【解决方案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

【讨论】：