javascript - 在 Jquery 或重复代码中将列表作为参数传递

Question

我正在为幼儿园的 children 做一个学校元素。 必须将一个 img 拖到一个特定的间隙，我正在用偏移量 * * 计算它的位置，因为这个孔是背景图像的一部分，我知道，不切实际，但我得到了这个元素。

但是Jquery中的函数不是我想要运行的这种类型的参数:

  Var fruits = ['.el1', '.el2', '.el3', '.el4'] 

只有我将列表的第一个元素作为函数的参数。 这是我的代码: HTML:

 <div class="element" style="list-style:none">
                        <li><img src="img-d/cascara de banana-01.png" class="banana2 el1"     id=""  alt=""></li>
                        <li><img src="img-d/cascara de huevo-01.png" class="huevo2 el2"         id="" alt=""></li>
                        <li><img src="img-d/hojas secas-01.png" class="hojas2 el3"                  id="" alt=""></li>
                        <li><img src="img-d/manzana-01.png" class="manzana2 el4"                        id=""   alt=""></li>
                    </div>

J查询:

var fruits = ['.el1', '.el2', '.el3', '.el4'];
$(document).on('ready', function(){
                $(fruits[0],fruits[1],fruits[2],fruits[03]).click(function() {

                    var top_left1 = $( fruits[0]).offset();
                    var top_left2 = $( fruits[1]).offset();
                    var top_left3 = $( fruits[2]).offset();
                    var top_left4 = $( fruits[3]).offset();

                    if (top_left1.top >=230 && top_left1.top <=330 && (top_left.left1 >=620 && top_left.left1 <=700)) {
                        console.log('Bravo!')
                        }
                });

                $(fruits[0],fruits[1],fruits[2],fruits[03]).draggable();



        });

但是写这个 $(fruits[0]).draggable(); , $(fruits[0]).click(function() 和 $(fruits[0]).draggable(); 可以拖动的第一张图片 但我需要拖动所有图像并评估其偏移量，以了解每个图像的位置。

Answer 1

$(fruits[0],fruits[1],fruits[2],fruits[03]) 正在创建大量参数，而您只需要一个字符串

尝试

$(fruits.join()).click...// OR .draggable

另一种更有效的方法是:

var $fruits = $('.el1, '.el2, '.el3, .el4').click(function() {

  var top_left1 = $fruits.eq(0).offset();
  var top_left2 = $fruits.eq(1).offset();
  var top_left3 = $fruits.eq(2).offset();
  var top_left4 = $fruits.eq(3).offset();

  if (top_left1.top >= 230 && top_left1.top <= 330 && (top_left.left1 >= 620 && top_left.left1 <= 700)) {
    console.log('Bravo!')
  }
}).draggable();

最后一种方法是，您可以为所有水果元素使用一个类或 parent > child 关系选择器