Question

我正在为幼儿园的孩子们做一个学校项目。必须将一个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>

Jquery的：

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关系选择器来处理所有水果元素

将列表作为Jquery或Duplicate Code中的参数传递

1 个答案: