jQuery函数只能使用一次，但我需要多次

Question

我一直在一个简单的青蛙游戏作为一种分配，并已经与我的功能之一碰到一个问题使用它。

function collision($frogger, $car1) { 
    var x1 = $frogger.offset().left; var y1 = $frogger.offset().top; 
    var h1 = $frogger.outerHeight(true); var w1 = $frogger.outerWidth(true); 
    var b1 = y1 + h1; var r1 = x1 + w1; 
    var x2 = $car1.offset().left; var y2 = $car1.offset().top; 
    var h2 = $car1.outerHeight(true); var w2 = $car1.outerWidth(true); 
    var b2 = y2 + h2; var r2 = x2 + w2; 

    if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) { 
     document.onkeydown = function() { 
     document.getElementById('jump').play(); 
     } 
    } 
    else { 
     $('#frogger').hide(); 
    } 
} 

我用这来检测第一辆汽车和青蛙之间的碰撞，但我需要这个功能的8个实例，因为有我map.This 8个车道是我的函数的第二辆车青蛙会交叉

// ** 2nd Lane ** // 
function collision2($frogger, $car2) { 
    var x1 = $frogger.offset().left; var y1 = $frogger.offset().top; 
    var h1 = $frogger.outerHeight(true); var w1 = $frogger.outerWidth(true); 
    var b1 = y1 + h1; var r1 = x1 + w1; 
    var x2 = $car2.offset().left; var y2 = $car2.offset().top; 
    var h2 = $car2.outerHeight(true); var w2 = $car2.outerWidth(true); 
    var b2 = y2 + h2; var r2 = x2 + w2; 

    if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) { 
     console.log("false"); 
    } 
    else { 
     $('#frogger').hide(); 
    } 
} 

是否有一个更简单的方法来为所有8个实例编写这个函数？否则，为什么这个函数只在第一次运行一次？

Answer 1

像这样的东西？

// Put cars into an array 
var cars = [$car1, $car2]; 

// Modify the function so that car is a function param 
function collision($frogger, car) { 
    var x1 = $frogger.offset().left; var y1 = $frogger.offset().top; 
    var h1 = $frogger.outerHeight(true); var w1 = $frogger.outerWidth(true); 
    var b1 = y1 + h1; var r1 = x1 + w1; 
    var x2 = car.offset().left; var y2 = car.offset().top; 
    var h2 = car.outerHeight(true); var w2 = $car.outerWidth(true); 
    var b2 = y2 + h2; var r2 = x2 + w2; 

    if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) { 
     document.onkeydown = function() { 
     document.getElementById('jump').play(); 
     } 
    } 
    else { 
     $('#frogger').hide(); 
    } 
} 

// Run the function across all cars from array 
cars.map(function(item){ 
    collision($frogger, item); 
}); 

Answer 2

我看你again.the你的问题是你要共享的代码others.you可以使用jQuery Deferred.then你可以定制你的行为了function.for的更多细节，你可以看到$.when和$.Deferred

function collision($frogger, $car) { 
    var x1 = $frogger.offset().left; var y1 = $frogger.offset().top; 
    var h1 = $frogger.outerHeight(true); var w1 = $frogger.outerWidth(true); 
    var b1 = y1 + h1; var r1 = x1 + w1; 
    var x2 = $car.offset().left; var y2 = $car.offset().top; 
    var h2 = $car.outerHeight(true); var w2 = $car.outerWidth(true); 
    var b2 = y2 + h2; var r2 = x2 + w2; 

    var dfd=$.Deferred(); 
    if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) { 
     dfd.reject(); 
    } 
    else { 
     dfd.resolve(); 
    } 
    return dfd; 
} 

然后，你可以使用不同的行为出collision.for例子：

var hidden=function(){ 
    $('#frogger').hide(); 
}; 
$.when(collision($frogger,$car1)).then(hidden).fail(function(){ 
    document.onkeydown = function() { 
     document.getElementById('jump').play(); 
    } 
}); 

$.when(collision($frogger,$car2)).then(hidden).fail(function(){ 
    console.log("false"); 
}); 

，如果你处理冲突都当hitted您可以通过引入其他功能共享同一代码喜欢下面的代码：

function test($frogger, $car){ 
    return $.when(collision($frogger, $car)).then(function() { 
     $('#frogger').hide(); 
    }); 
} 
test($frogger, $car1).fail(function() { 
    document.onkeydown = function() { 
     document.getElementById('jump').play(); 
    } 
}); 

test($frogger, $car2).fail(function() { 
    console.log("false"); 
}); 

这种方法被称为Refactor，使你的代码更干净&简单。