通过Javascript添加和删除li

Question

我有左侧窗格和右侧窗格。 我想处理两个场景

1. 当我单击右侧要添加的列表（li）时（“最初左侧窗格为空”）并从右侧删除。
2. 颠倒第一部分。 当我点击左侧添加的li时，需要从左侧移除并添加到右侧。

我做了第一个场景，如下所示

<div class="left_pane">
  <div class="content_left_pane">
    <ul data-role="listview" id="left_side_ul">
    </ul>
   </div>
 </div>

<div class="right_pane">
 <ul data-role="listview" id="right_side_ul">   
  <li class="showDetails" id="account-1" onclick="selected_destination($(this).attr('id'))">
    <div class="ui-grid-b">
       <div class="ui-block-a"><div>[Facility name] A</div><div>[Account]</div></div>
       <div class="ui-block-b"><div>[Address Line 1]</div><div>[Address Line 2]</div><div>[City],[Statte],[Zip code]</div></div>
       <div class="ui-block-c"><span class="ui-li-count" style="right: 30%; font-size: 15px;">12</span></div>
     </div>             
   </li>    
 </ul>
</div>



<script>
function selected_destination(id){   
      $("#right_side_ul li#"+id+"").clone().prependTo("div.content_left_pane ul#left_side_ul");
      $("#right_side_ul li#"+id+"").remove();
    }

  </script>

第二部分我没有任何线索。 因为在第一部分我在onclick函数中发送当前li id。 但在相反的部分，在左侧窗格我只有ul，所以我不知道如何做第二种情况。

Answer 1

我建议你不要在html代码中直接注册onclick处理程序。 当您使用jQuery时，此方案应该适合您：

HTML：

<div class="left_pane">
  <div class="content_left_pane">
    <ul data-role="listview" id="left_side_ul">
    </ul>
   </div>
 </div>

<div class="right_pane">
 <ul data-role="listview" id="right_side_ul">   
  <li class="showDetails" id="account-1">
    <div class="ui-grid-b">
       <div class="ui-block-a"><div>[Facility name] A</div><div>[Account]</div></div>
       <div class="ui-block-b"><div>[Address Line 1]</div><div>[Address Line 2]</div><div>[City],[Statte],[Zip code]</div></div>
       <div class="ui-block-c"><span class="ui-li-count" style="right: 30%; font-size: 15px;">12</span></div>
     </div>             
   </li>    
 </ul>
</div>

JavaScript的：

$(document).ready(function(){
    $('#right_side_ul li').live('click', function(){
        $(this).appendTo('#left_side_ul');
    });

    $('#left_side_ul li').live('click', function(){
        $(this).appendTo('#right_side_ul');
    });
});​

请注意，我在这里使用live()因为LI元素以dinamically方式添加到UL 。

如您所见，右侧和左侧窗格的javascript代码几乎相同，因此您可以通过将它们合并为一个来优化我的解决方案