JQuery-变量传递不正确_Jquery_Jquery Ui Sortable

JQuery-变量传递不正确

jquery

JQuery-变量传递不正确,jquery,jquery-ui-sortable,Jquery,Jquery Ui Sortable,我正在学习javascript和jquery，但在下面的代码中遇到了一些问题。基本上，我在主列表中有一个球员列表，当双击主列表时，它会添加到球员最少的团队中。附件条款似乎不起作用。我是否误用了其中的变量，或者以某种方式错误地指向DOM？当我为团队硬编码价值时，它将起作用。我只是使用警报来查看currentteam的值是否正确地传递到该点，并且它是正确的。但是，在appendTo子句中，它不起作用 Note I tried to create a JSFiddle but it didn't

我正在学习javascript和jquery，但在下面的代码中遇到了一些问题。基本上，我在主列表中有一个球员列表，当双击主列表时，它会添加到球员最少的团队中。附件条款似乎不起作用。我是否误用了其中的变量，或者以某种方式错误地指向DOM？当我为团队硬编码价值时，它将起作用。我只是使用警报来查看currentteam的值是否正确地传递到该点，并且它是正确的。但是，在appendTo子句中，它不起作用

  Note I tried to create a JSFiddle but it didn't run correctly. i even tried copying the actual sortable jquery example from their site. Again it didn't run.

在我的例子中，我有一份将被选派到各个球队的球员名单。我还没有办理好所有的登机手续。但我稍后会补充这一点。现在，我希望能够拖动或双击来让玩家移动

我不知道为什么当我双击时，如果我在appendTo子句中有currentTeam，那么玩家不会移动到列表中，但是如果我硬编码team3，双击会将玩家添加到该位置。我显然不想硬编码这个值

如果我需要更好的编辑，我将不胜感激，或者如果有人能在JSFIDLE中实现这一点，那将非常酷

<style>
    div#info {width:1000px;}
    div#contentarea {width:1000px; border:solid 1px blue;}
    div#draftlist {width:334px; float:left;}
    div#column1 {width:333px; float:left;}
    div#column2 {width:333px; float:left;}
    .connectedSortable, .sortable,  {list-style-type: none; border: solid 1px black; margin: 0; padding: 0 0 2.5em; width: 333px; }
</style>

<script>

    $(function() {
        $("#masterlist").sortable({
            connectWith: ".sortable"
        }).on("dblclick", "li", function(){
            var numberOfPlayers = null;
            var currentTeam = null; 
            $('.sortable').each(function () {
                var currentNumberOfPlayers = $(this).children("li").length; 
                if (numberOfPlayers === null || numberOfPlayers > currentNumberOfPlayers) {
                    numberOfPlayers = currentNumberOfPlayers;
                    currentTeam = $(this).attr('id');
                }
            })

            alert("current team is " + currentTeam);

            $(this).appendto(currentTeam).ul; // doesn't work
            // $(this).appendto(team3).ul would work but don't want it hard coded value
        });


    $( "#team1, #team2, #team3" ).sortable({

        connectWith: ".connectedSortable",

        receive: function (event, ui) {

            if(($(this).find('li').length) >5) {
                $(ui.sender).sortable('cancel');
            }

        }

    }

    ).disableSelection();


  });
  </script>




<body>
<DIV id="contentarea">



<DIV id="draftlist">
DRAFT LIST:
<ul id="masterlist" class="connectedSortable">
<li>Player One</li>
<li>Player Two</li>
<li>Player Three</li>
<li>Player Four</li>
<li>Player Five</li>
</ul>
</DIV>

<DIV id="column1">
TEAM ONE:
<ul id="team1" class="sortable">
</ul>

TEAM TWO:
<ul id="team2" class="sortable">
</ul>

TEAM THREE:
<ul id="team3" class="sortable">
</ul>

</DIV>

</DIV> <!-- end main content area -->


div#info{宽度：1000px；}
div#contentarea{宽度：1000px；边框：实心1px蓝色；}
div#draftlist{宽度：334px；浮点：左；}
div#column1{宽度：333px；浮点：左；}
div#column2{宽度：333px；浮点：左；}
.connectedSortable、.sortable、{列表样式类型：无；边框：实心1px黑色；边距：0；填充：0 0 2.5em；宽度：333px；}
$（函数（）{
$（“#主列表”）。可排序({
连接到：“.sortable”
}).on（“dblclick”，“li”，function（））{
var numberOfPlayers=null；
var currentTeam=null；
$（'.sortable'）。每个（函数（）{
var currentNumberOfPlayers=$（this）.children（“li”）.length；
如果（NumberOfPlayer==null | | NumberOfPlayer>CurrentNumberOfPlayer）{
NumberOfPlayer=当前NumberOfPlayer；
currentTeam=$（this.attr（'id'）；
}
})
警报（“当前团队为”+currentTeam）；
$（this.appendto（currentTeam）.ul；//不起作用
//$（this.appendto（team3.ul）可以工作，但不希望使用硬编码值
});
$（“#团队1，#团队2，#团队3”）。可排序({
connectWith:“.connectedSortable”，
接收：功能（事件、用户界面）{
如果（$（this.find（'li'）.length）>5）{
$（ui.sender）.sortable（'cancel'）；
}
}
}
).disableSelection（）；
});
名单草案：

一号玩家
球员二
球员三
球员四
球员五

第一小组：


第二小组：


第三小组：

传入的

appendTo

应该是一个元素或类似

的html字符串，在这种情况下，我想属性

id

只是一个普通字符串，因此它不起作用，相反，您可能想使用

append

，但不清楚要显示属性id的元素。不相关，但是使用

camelCase

命名变量可以使它们更易于阅读。@KingKing您也可以传递

选择器，这正是OP试图做的。但是，我猜他需要在选择器前面加一个哈希（#
），这样jQuery才能找到元素。@JackPattishallJr。我忘了包括这个，当然我在评论之前看到了这个链接。我也被OP的话弄糊涂了，我以为他只是想在某个元素中显示id
属性（因此他使用alert
查看它）；加上（“#”+currentTeam）.ul；