动态更改可放置元素的 CSS答案

【问题标题】：changing the CSS of the droppable element dynamically动态更改可放置元素的 CSS
【发布时间】：2014-03-28 00:43:27
【问题描述】：

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

现在的问题是，我对每个元素都有一个图像。只要将适当的元素放到正确的位置，该图像就应该可见。由于 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

【问题讨论】：

你能用你目前拥有的代码创建一个jsfiddle.net吗？
在整个跨度创建过程中，您的引号都不正确。您也不能只在 JavaScript 中创建元素并期望它们出现。它们必须作为字符串或通过适当的方法创建，然后附加。您只是在 else 情况下追加。
对不起，我一直在快速查看演示代码，实际上我当然有附加 :-) 我已将其添加到演示代码中
这可能是您的随机生成器的结果。您得到一个介于 0 和 9 之间的数字。i 的评估结果可能总是大于您获得的随机数。 i > 9 肯定是这种情况。

标签： javascript jquery jquery-ui css html5-canvas

【解决方案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。

【讨论】：

哇，这听起来正是我所需要的。程序如何知道 idx 是什么？是因为传递给它的 i 吗？
@BrigitteFellner 是的，没错。近距离观察正在发生的事情——这需要一些时间来适应，但一旦你了解它是一种非常有用的技术。您正在运行一个以 i 作为参数的函数。然后该函数返回另一个使用 idx 的函数（可拖动的）。 idx 是传入的 i 的值，但因为它在传递给函数时被复制，所以当 for 循环继续时它不会递增。