ajax，jQuery和过滤下拉

因此，我有这两个jquery函数，它们通过我的XHR服务一个键过滤我的列表结果（未显示）。我是jquery（和一般的web开发人员）的新手。这两个函数与％90相同（id标记除外）。我怎么能重新写这个更像DRY？ajax，jQuery和过滤下拉

$('#id_group').change(function() { 
    var option = $(this).val(); 
    $.get('jobs/update/', {group:option}, function(data) { 
     $('#jobs').html(data).hide().fadeIn(1000); 
    }); 
    }); 

    $('#id_location').change(function() { 
    var option = $(this).val(); 
    $.get('jobs/update/', {location:option}, function(data) { 
     $('#jobs').html(data).hide().fadeIn(1000); 
    }); 
    });

来源

2011-05-26 nnachefski

通过传递自定义数据将jQuery你可以使用事件对象（这里记录http://api.jquery.com/category/events/event-object/的）并有一个通用的功能来完成这两项任务。

function doGet(e) { 
    var option = $(e.target).val(); 
    $.get('jobs/update/',e.data, function(data) { 
     $('#jobs').html(data).hide().fadeIn(1000); 
    }); 

$('#id_group').change({group:option}, doGet); 

$('#id_location').change({location:option}, doGet);

来源

2011-05-26 20:52:09 Hogan

完美！谢谢先生... – nnachefski 2011-05-26 20:55:28

享受。令人震惊的是，有多少人不需要了解和使用eventObject。相当有用的那个家伙。 – Hogan 2011-05-26 20:57:07

如果使用类是不是一种选择，你可以参考一个定义的函数是这样的：

$('#id_group').change(function() { 
    // Pass the element id to the defined function 
    get_jobs($(this).attr('id')); 
} 
$('#id_location').change(function() { 
    // Pass the element id to the defined function 
    get_jobs($(this).attr('id')); 
} 

function get_jobs(id) { 
    var option = $('#' + id).val(); 
    $.get('jobs/update/', {location:option}, function(data) { 
     $('#jobs').html(data).hide().fadeIn(1000); 
    }); 
}

来源

2011-05-26 20:49:11

这是不正确的 - 一个情况下使用'{位置：选项}'和'其他{组：选项}'。这两个调用都有相同的参数。 – Hogan 2011-05-26 20:53:59

我会为两者使用相同的事件处理程序，然后稍微改变后端。

$(".get_selects").change(function() { 
    var option = $(this).val(); 
    var type = $(this).attr("id"); 
    $.get('jobs/update/', {type: type, value: option}, function (data) { 
     $('#jobs').html(data).hide().fadeIn(1000); 
    }); 
});

我已经改变了HTML了一点，所以检查出的小提琴：http://jsfiddle.net/uVahr/

来源

2011-05-26 20:54:40 Dormouse

ajax，jQuery和过滤下拉

回答

相关问题