javascript - 使用闭包 : Not working? 循环(使用 jqueryui)

Question

我相信我在我的代码中遇到了循环关闭问题。我读过 this article 这是一个很大的帮助。最近我想出了一个类似于文章中引用的“闭包循环”部分的问题。我已经尝试了他们的解决方案，但它仍然没有解决我的问题。我一直在到处寻找解决方案，但总能在文章中找到解决方案。

我正在使用 jqueryui 使一些 lis 可拖动，当我将它们放入容器中时，我需要使用特定于该 li 的变量(节点)。问题是节点(和索引)总是最后一个(因此是闭包问题)。

这是我的代码(我稍微简化了它以便更容易识别问题):

function makeDraggable(node, i) {
        $("#rightTab li#" + node.id).draggable({
            containment: 'div#container',
            stack: 'div#container',
            scroll: false,
            revert: 'invalid',
            helper: function() {
                return $(this).children().clone();
            },
            start: function(event, ui) {
                $(this).children().css('opacity', 0);
            },
            stop: function(event, ui) {
                $(this).children().css('opacity', 1);
            }
        });

        $("#vis").droppable({
            drop: test(node, i)
        });
    }

    function test(noder, index) {
        return function(event, ui) {
            alert(index);
            //stuff with node.
        }
    }

    function appendInfo(nodes) {
        for(var i = 0; i < nodes.length; i++) {
            $("#rightTab #content ul").append("<li id=" + nodes[i].id + "><div></div></li>");

            if(visualization.hasImageLabel) {
                interfaceHandler.handleImageLabel(nodes[i]);
            }
            if(visualization.hasTextLabel) {
                interfaceHandler.handleTextLabel(nodes[i]);
            }

            makeDraggable(nodes[i], i);
        }
    }

当我提醒索引(在函数测试中)时，它总是打印 9(最大数组长度)，节点也总是最后一个。

(抱歉英语不好)

Answer 1

您在循环的每次迭代中调用 $("#vis").droppable({...})。这设置了 10 个 drop 事件处理程序；只有最后一个被触发，它作为参数传递 (node_nine, 9)。

检查回调中 ui.draggable 的值；它会告诉您丢弃的元素是什么。