碰撞具有多個元件（各功能？）

Question

我有一個div（"#basket"），其應該捕獲具有相同的類（".food"）

function collision($div1, $div2) { 
     var x1 = $div1.offset().left; 
     var y1 = $div1.offset().top; 
     var h1 = $div1.outerHeight(true); 
     var w1 = $div1.outerWidth(true); 
     var b1 = y1 + h1; 
     var r1 = x1 + w1; 
     var x2 = $div2.offset().left; 
     var y2 = $div2.offset().top; 
     var h2 = $div2.outerHeight(true); 
     var w2 = $div2.outerWidth(true); 
     var b2 = y2 + h2; 
     var r2 = x2 + w2; 
     if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false; 

     var value = Number(($div1).attr("data-value")); 
     $("#counter").html(parseInt($("#counter").html()) + value); 

     function getsmall() { 
     $div1.remove(); 
     //$div1.stop().animate({width: "0px",height:"0px"}, 200, function(){}); 
     } 
     getsmall(); 
} 


    window.setInterval(function() { 
     var basket = $('#basket'); 
     var food_1 = ('#food_1'); // classname .food 
     var food_2 = ('#food_2'); // classname .food 
     collision($(food_1), $(basket)); 
     collision($(food_2), $(basket)); 
    }, 200); 

會有超過。食物的20和我的許多元素如果我使用每個元素的ids，就不想編寫那麼多的代碼。

這個函數對於兩個獨特的元素（兩個id）很有效，但是對於一個元素只有一個id和超過20個元素只有一個類名的情況下，這個函數不會有效。

函數collision如何執行到#basket以及許多類名爲.food的元素？

Answer 1

可以使用each功能，它遍歷jQuery對象中的所有元素：

window.setInterval(function(){ 
    var basket = $('#basket'); 
    var food = $('.food'); 
    // Here comes the magic 
    food.each(function(){ 
     collision($(this), $(basket)); 
    }); 
}, 200); 

Answer 2

foods=document.getElementsByClass("food"); 
foods.forEach(function(food){ 
    collision(basket,food); 
}); 

的FIRSTLINE存儲具有可變的食品內部的類食品元素（如陣列）的集合。現在，您可以循環低谷（forEach）併爲每個籃子食物組合調用碰撞函數。