Question

我有一份产品清单。其中一些应该被删除到特定点。与其他人一起，任何其他事情都应该发生（现在不重要，只是为了让你知道，我有随机数量的丢弃元素）

现在的问题是，我有一个每个元素的图像。只要将适当的元素放到正确的位置，该图像就应该可见。由于for循环在用户可以与程序交互的点完成，因此我总是30.这是代码：

for (var i = 0; i < 30; i++) {
  if (i > (Math.floor(Math.random() * 10))) {
      $('#listProducts').append('<span class="invisibleImageContainer' + i + '"><img class="invisibleImage-' + products[i].toString() + '" src="img/products/' + products[i] + '" style="display:none"/></span>')
    } else {
      $('#listProducts').append('<p>anythingElse</p>');
    }   

$('.droppableClassName' + i).droppable({
    accept: '.drag-' + products[i],
    drop: function(event, ui) {
        $(".invisibleImage-" + products[i].toString()).css("display", "block");
      } //END drop function
   }); //END droppable
} //END for Schleife

Answer 1

您需要一个传递当前i值的立即执行的函数。在这种情况下，你会经常看到这种模式。类似的东西：

$('.droppableClassName' + i).droppable({
    accept: '.drag-' + products[i],
    drop: (function(idx) {
        return function(event, ui) {
            $(".invisibleImage-" + products[idx].toString()).css("display", "block");
          } //END drop function
        })(i) //Self executing anonymous function. Pass i to it.
   }); //END droppable
} //E

将i传递给自执行函数会创建它的副本，因此对于每个可拖动对象，您将引用本地副本idx而不是更改值i。

动态更改droppable元素的CSS

1 个答案: