Question

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

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

Answer 1

如果不能使用类，则可以引用如下定义的函数：

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

Answer 2

通过将自定义数据传递给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);

Answer 3

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

$(".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/

ajax，jquery和过滤下拉菜单

3 个答案: