javascript - 动态更改可放置元素的 CSS

Question

我有一份产品 list 。其中一些应该下降到一个特定的点。对于其他人，应该发生任何其他事情(现在不重要，只是想让你知道，我有随机数量的丢弃元素)

现在的问题是，每个元素都有一个图像。一旦将适当的元素放到正确的位置，该图像就应该可见。由于 for 循环在用户可以与程序交互时结束，因此 i 始终为 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。