jquery 可排序连接列表的帮助

Question

这是我的代码的精确副本： jsFiddleCode

如您所见，我有两个可排序的连接列表和当某些项目被放入它们时，它们分别执行函数 subFunction 和 unsubFunction。现在，我还有双击其中一个项目的代码，以便将它们放入相反的列表中（函数 switchLists() 负责这一点。

现在，我想在这里完成什么与拖放项目时的行为相同（出现警报框并准确地说（例如）：“项目 6 刚刚 subed”。

我缺乏理解，我怎么可能有 ui< /strong> 在调用函数 subFunction 时可用，而不是在调用 switchLists 时可用（我确实尝试将 ui 添加到调用中。 switchLists 像这样：

switchLists(e, ui){  
  //same code as before...

  //this code doesn't execute
  var itemText= ui.item.text();
  alert(itemText + " just subed");  
}

但是我在 Firefox 中的 FireBug 中收到一个错误，指出 ui 未定义。

您可以自由地在 fiddle 上编辑代码并将其

作为更一般的问题 发布到此处。 ：jquery 如何将变量传递给其他函数？我的意思是，代码：

receive: subFunction  

在没有任何参数的情况下调用，那么 subFunction 如何获取事件和 ui？如果您有一些关于这一切的好教程，我们将不胜感激。

感谢您的帮助。

Answer 1

经过一整天的研究，我终于找到了答案，并这样做了： jsFiddle 链接

简而言之，我将前面的函数分成了两个函数，并且我还阅读了更多有关 jQuery 的内容，发现在函数中我可以执行 $(this) 操作，从而访问元素的文本。

好的，仅供参考，整个代码在这里：

$(function() {
    $( "#sortable1" ).sortable({
        connectWith: ".connectedSortable",          
        receive: subFunction
    });     

    $( "#sortable2" ).sortable({
        connectWith: ".connectedSortable",          
        receive: unsubFunction
    });     

    $(".ui-state-default").dblclick(function() {
        $(this).removeClass().addClass("ui-state-highlight");           

        var litem = $(this).clone();
        litem.appendTo($('#sortable2'));
        $(this).remove();

        $.jGrowl($(this).text() + " successfully unsubed!", {header:"Subscription Status", life: 1000});
    });

    $(".ui-state-highlight").dblclick(function() {
        $(this).removeClass().addClass("ui-state-default");         

        var litem = $(this).clone();
        litem.appendTo($('#sortable1'));
        $(this).remove();

        $.jGrowl($(this).text() + " successfully subed!", {header:"Subscription Status", life: 1000});          
    });     

    function subFunction(event, ui) {
        ui.item.toggleClass("ui-state-default");
        ui.item.toggleClass("ui-state-highlight");

        $.jGrowl(ui.item.text() + " successfully subed!", {header:"Subscription Status", life: 1000});
    }

    function unsubFunction(event, ui) {
        ui.item.toggleClass("ui-state-default");
        ui.item.toggleClass("ui-state-highlight");

        $.jGrowl(ui.item.text() + " successfully unsubed!", {header:"Subscription Status", life: 1000});
    }

});