Question

我正在尝试优化我的代码。

我当前有两个单独的调用，带有一个代码块，每个代码块都足够相同。我知道如果我使用相同的事件方法查看两个单独的项目（例如.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，＃drive点击？

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

代码是一样的，你只有一张支票。

合并jQuery事件方法的正确方法

1 个答案: