0

我有一个带有可选列表的 jquery 手风琴。当用户单击一个项目时，它会出现在他们的选定项目列表中，该列表是可排序的。有许多列作为默认列出现在它们的列表中，并且每个选定的项目在手风琴中显示为绿色。我的问题是可排序列表中包含两个单词的行项目不可排序，但包含一个单词的项目是不可排序的。我不知道为什么。有什么想法吗？

这是我的小提琴：http: //jsfiddle.net/kmbonin82/NkgC2/9/

HTML：

<h3>List 1</h3>
<ul class="list">
     <li id="Country">Country</li>
    <li id="Region">Region</li>
  <li id="Location_Name">Location Name</li>
    <li id="Location_Start">Location Start</li>
</ul>
<h3>List 2</h3>
<ul class="list">
     <li id="Contract_Start">Contract Start</li>
    <li id="Contract_Status">Contract Status</li>
    <li id="Contract">Contract</li>
</ul>

<p id="feedback">
<span>You've selected items:</span>    
    <ul id="select-result">
        <li id="Region">Region</li>
        <li id="Location Name">Location Name</li>
        <li id="Country">Country</li>
        <li id="Contract Status">Contract Status</li>
    </ul>    
</p>

JS：

 $(function () {
       $(".list").selectable({
           stop: function () {
               var result = $("#select-result");

               $(".ui-selected", this).each(function () {
                   $(this).css('background-color', '#669966');
                   $(this).css('color', '#FFFFFF');
                   result.append('<li id="' + $(this).text()  + '">' + $(this).text() + '</li>');
                   sortColumns();
               });
           }
       });
       sortColumns();
   });


   $(function () {
       $("#accordion").accordion({
           collapsible: true,
           autoHeight: false
       });
   });

   $(function () {
       $("#select-result li").each(function (index) {
           var thisID = $(this).attr('id');
           thisID = thisID.replace(/ /g, '_');
           document.getElementById(thisID).style.background = '#669966';
           document.getElementById(thisID).style.color = '#FFFFFF';
           sortColumns();
       });
   });

   function sortColumns() {
       $(function () {
           $("#select-result")
            .sortable({
                handle: ".handle",
                over: function () {
                    removeIntent = false;
                },
                out: function () {
                    removeIntent = true;
                },

                beforeStop: function (event, ui) {
                    if (removeIntent == true) {
                        var thisID = ui.item.text();
                        thisID = thisID.replace(/ /g, '_');
                        ui.item.remove();
                        document.getElementById(thisID).style.background = '#FFFFFF';
                        document.getElementById(thisID).style.color = '#000000';
                    }
                }
            })
            .find("li")
            .addClass("ui-corner-all")
            .prepend("<div class='handle'><span class='ui-icon ui-icon-carat-2-n-s'></span></div>");
       });
   }
4

1 回答 1

1

“位置名称”和“合同状态”不可排序，因为它们的 id 值错误。他们之间有空间。

        <li id="Location Name">Location Name</li>
        <li id="Contract Status">Contract Status</li>

更新演示：http: //jsfiddle.net/NkgC2/10/

奖金：

a）您预先挂起 div 的方式不是正确的方式。如果您看到您的 html 代码，则在您选择每个项目后，它会为每个列表项添加一个额外的 div

b) 而不是调用 sortable() 函数几次（它在选择任何项目之前调用 3 次。）使用 jquery 'on' 方法将 api 绑定到不存在的元素。

于 2013-04-09T19:48:18.633 回答