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和過濾下拉

回答

相關問題