Question

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

点击右侧需要添加的列表（li）（“最初左侧窗格为空”）并从右侧删除。
反向第一部分。当我点击左侧添加的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元素以动态方式添加到UL。

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

通过Javascript添加和删除li

1 个答案: