Question

我正在研究这个JSFiddle（http://jsfiddle.net/kking/Q7tdW/24/）。我正在用它来为我需要创建的很多项目奠定基础。

我使用ActionScript 3在Flash中制作这些内容。目标是为播放器提供一组随机选项（在我的小提琴中，这是由带有数字的蓝色框表示）并且它们必须拖动把它们放到正确的位置。每个盒子只有一个可能的答案。

虽然我有基本的功能，但有很多重复的代码。我想这样做，以便我不需要为每个目标个性化的JavaScript。在AS3中，您将使用目标名称数组，应用droppable函数的for循环和if语句来执行此操作，该语句询问已删除框的类是==到目标+的名称'target'。因此answer1会落入answer1target。

我试图在JavaScript中复制该功能并遇到麻烦。这是重复的代码：

$("#answer1target").droppable({
    drop: function (event, ui) {
        if (ui.draggable.attr("id") == 'answer1') {
            ui.draggable.draggable('option', 'revert', false);
            ui.draggable.position({
                of: $(this),
                my: 'center',
                at: 'center'
            });
            ui.draggable.removeClass('card');
            ui.draggable.addClass('cardCorrect');
            ui.draggable('disable');
        }
    }
});

我觉得答案在于改写第3行（小提琴上的12）......但是我不知道该怎么做。

我的最终目标是在每个游戏中使用不同数量的牌和目标重复使用此脚本。理想情况下，我需要在JavaScript中更改的是一些数组并在html中添加单个div。

Answer 1

我去修改你的JSFiddle以使其更加面向对象。

我所做的几乎就是通过按类而不是ID选择事物，将您的各个组件压缩成单个多对象函数，这意味着您的整个代码已经缩减为

$('.card').draggable({revert:true});
$('.target').droppable({
  drop: function (event, ui) {
    // $(this).attr('id').substr(0,7) is equal to "answer1", "answer2", etc.
    if (ui.draggable.attr('id') == $(this).attr('id').substr(0,7)) {
      ui.draggable.draggable('option','revert',false);
      ui.draggable.position({
        of:$(this),
        my:'center',
        at:'center'
      });
      ui.draggable.removeClass('card');
      ui.draggable.addClass('cardCorrect');
      ui.draggable('disable');
    }
  }
});

在引用特定类时优化jquery

1 个答案: