jQueryイベントメソッドをマージする正しい方法

Question

私は自分のコードを最適化しようとしています。

私は現在、2つの独立した呼び出しを持っています。同じイベントメソッド（例：.click）を持つ別々の2つのアイテムを見ている場合、追加のセレクタを追加するだけで済みます。

ただし、クリックと変更の両方で使用しています。

EDIT：＃ウォーキングと＃ドライブはラジオボタンで、#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); 
 
     });  
 
    } 
 
});

クリック#driving、#narrowの変化と#walkingをマージする私のための方法はありますか？あなたはとても好きでした

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

コードは同じですが、あなたは小切手しか持っていません。