与多个元素的碰撞（每个函数？）

Question

我有一个 div ("#basket") 它应该捕获许多具有相同 class (".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 个 .food，如果我使用每个元素的 ids，我不想写那么多代码。

该函数适用于两个独特的元素（两个 ID），但不适用于一个具有 ID 的元素和超过 20 个只有 class 名称的元素。

函数 collision 如何对 #basket 和许多具有 classname .food 的元素执行？

Answer 1

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

第一行存储了一组元素（如数组），这些元素在变量食物中包含 class 食物。现在您可以循环 (forEach) 并为每个篮子食物组合调用碰撞函数。

Answer 2

你可以使用each函数，它循环遍历jQuery对象中的所有元素：

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

与多个元素的碰撞（每个函数？）

Collision with multiple elements (each function?)

javascript

jquery

collision-detection