正確的方式來合併jQuery事件方法

Question

我想優化我的代碼。

我目前有兩個獨立的調用w /一段代碼，每個代碼接近相同的東西。我知道如果我使用相同的事件方法查看兩個單獨的項目（例如.click），我可以簡單地添加其他選擇器。

但是，我正在使用點擊和更改。

編輯：#walking和#driving是單選按鈕，＃narrow是一個選擇框。

這是我目前：

// When a place type is selected 
 
$('#narrow').on('change', function() { 
 
    
 
    // Clear the current results 
 
    $('#place_results_wrap').empty(); 
 
    
 
    // Show progress 
 
    
 
    $('#place_results_wrap').html('' + 
 
     '<div id="load_container">' + 
 
      '<div id="load">' + 
 
      '<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading</span>' + 
 
      '<div id="status"><h3>Please wait...</h3></div>' + 
 
     '</div>'); 
 
    
 
    
 
    // Temp disable the narrow 
 
    $("#narrow").prop("disabled", true); 
 
    
 
    setTimeout(function() { 
 
     $("#narrow").prop("disabled", false); 
 
    }, 15000); 
 
    
 
    // Grab the current transport method 
 
    var mode = $('input[name=travelmode]:checked').val().toLowerCase(); 
 
    
 
    // Load page into results div 
 
    $('#place_results_wrap').load('/assets/php/places.php?type=' + this.value + '&mode=' + mode, '&latlon=' + latlon, function() { 
 
     $('html, body').animate({ 
 
      scrollTop: $(".place_results").offset().top 
 
     }, 500); 
 
    }); 
 
}); 
 
    
 
    
 
// If the travel type is changed 
 
$('#walking, #driving').click(function(){ 
 
    
 
    // Grab the current place type 
 
    var place_type = $('select#narrow').val(); 
 
    
 
    // If it has been specified 
 
    if(place_type) 
 
    { 
 
     // Clear the current results 
 
     $('#place_results_wrap').empty(); 
 
      
 
     // Show progress 
 
     
 
     $('#place_results_wrap').html('' + 
 
      '<div id="load_container">' + 
 
       '<div id="load">' + 
 
       '<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading</span>' + 
 
       '<div id="status"><h3>Please wait...</h3></div>' + 
 
      '</div>'); 
 

 
     // Temp disable the travel type 
 
     $("#driving, #walking").prop("disabled", true); 
 
     
 
     setTimeout(function() { 
 
      $("#driving, #walking").prop("disabled", false); 
 
     }, 15000); 
 
    
 
     // Grab the current category  
 
     var type = $('select#narrow').val(); 
 
     
 
     // Grab the current transport method 
 
     var mode = this.value.toLowerCase();  
 
     
 
     // Load page into results div 
 
     $('#place_results_wrap').load('/assets/php/places.php?type=' + type + '&mode=' + mode, '&latlon=' + latlon, function() { 
 
      $('html, body').animate({ 
 
       scrollTop: $(".place_results").offset().top 
 
      }, 500); 
 
     });  
 
    } 
 
});

有我的方式合併#narrow變化和#walking，#driving點擊？

Answer 1

你可以做像這樣：

創建具有變化事件處理函數：

// When a place type is selected 
function onChange() { 
    // Clear the current results 
    $('#place_results_wrap').empty(); 

    // Show progress 

    $('#place_results_wrap').html('' + 
     '<div id="load_container">' + 
      '<div id="load">' + 
      '<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading</span>' + 
      '<div id="status"><h3>Please wait...</h3></div>' + 
     '</div>'); 


    // Temp disable the narrow 
    $("#narrow").prop("disabled", true); 

    setTimeout(function() { 
     $("#narrow").prop("disabled", false); 
    }, 15000); 

    // Grab the current transport method 
    var mode = $('input[name=travelmode]:checked').val().toLowerCase(); 

    // Load page into results div 
    $('#place_results_wrap').load('/assets/php/places.php?type=' + this.value + '&mode=' + mode, '&latlon=' + latlon, function() { 
     $('html, body').animate({ 
      scrollTop: $(".place_results").offset().top 
     }, 500); 
    }); 
} 

$('#narrow').on('change', onChange); 

在你點擊事件，你只需要調用的變化定義的函數事件：

// If the travel type is changed 
$('#walking, #driving').click(function(){ 

    // Grab the current place type 
    var place_type = $('select#narrow').val(); 

    // If it has been specified 
    if(place_type) 
    { 
     onChange();  
    } 
}); 

代碼是一樣的，你只有一張支票。