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，使你的代碼更乾淨&簡單。