通過Javascript添加和刪除li

Question

我有左側窗格和右側窗格。我要對付兩個場景

1. 當我點擊右側的希望加上左側的列表（LI）（`最初左側窗格是空的），並從右側刪除。
2. 第一個的倒序部分。當我點擊左側添加的李，需要從左側刪除並添加到右側。

我做的第一個場景像下面

<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代碼幾乎是相同的，所以你可以通過它們合併成一個