取消選擇未知的可選

Question

我有一張桌子，按邏輯分爲兩半。我將不得不只選擇圖像中的一半。

現在，如果我選擇不同的「半」行，我需要取消選擇前一個。我會怎麼做？我的代碼是在這裏：

function selectme(id) { 
    $('.td' + id).toggleClass("ui-selected"); 
} 

我想我需要把其他行移除這個類：

<tr class="line1"> 
    <td width="10" class="td3523" onclick="selectme('3523');"> 
     <input type="radio" name="selattendance" id="tr3523" onClick="setEditDelete(3523)"/> 
    </td> 
    <td width="100" class="td3523" onclick="selectme('3523');">2012-11-19</td> 
    <td width="125" class="td3523" onclick="selectme('3523');"> 
     <table width="100%" cellpadding="0" cellspacing="0" style="border: 0;padding: 0;border-collapse: collapse"> 
      <tr> 
       <td style="width: 50%;padding-right: 10px;border: 0" align="right" valign="middle">22:54</td> 
       <td style="width: 20%;border: 0">  <a href="#" onclick="loadPic('attendanceimages/39286a0a6b45cae9f116b11882f36046.jpg','2012-11-19','2012-11-19','add','','In','22:54:04','22:54:04');"><img src="images/punchimg.png"></a> 
       </td> 
       <td style="width: 20%;border: 0">&nbsp;</td> 
      </tr> 
     </table> 
    </td> 
</tr> 

當我點擊任何td，所有td s的同一ID使用此代碼獲取所選來自之前選擇的td s。我會怎麼做？謝謝。

Answer 1

給你的<td> -s另一個類說tdclss然後在你的函數中使用它來刪除ui-selected類。

function selectme(id) { 
    $('.tdclss').removeClass("ui-selected"); 
    $('.td' + id).toggleClass("ui-selected"); 
} 

Answer 2

使用具有相同ID的多個字段遲早會有問題。您可以使用類屬性來分組單元格，或者您可以（可能）使用<span>對它們進行分組（儘管我必須承認，我從來沒有在<tr>內嘗試過<span>）。

Answer 3

一個方法：

$('input:radio').change(
    function(){ 
     // caching the jQuery $(this) object 
     var that = $(this); 
      that 
       // moves up to the closest ancestor table element 
       .closest('table') 
       // finds the '.selected' elements within that table 
       .find('.selected') 
       // removes the 'selected' class from those elements. 
       .removeClass('selected'); 
      that 
       // moves to the parent td element 
       .parent() 
       // selects subsequent siblings *until* it finds 
       // an element that matches the selector 
       .nextUntil($('td:has("input:radio")')) 
       // adds back the current td element to the collection 
       .andSelf() 
       // adds the 'selected' class 
       .addClass('selected'); 
    });​ 

JS Fiddle demo

參考文獻：

• addClass()。
• andSelf()。
• closest()。
• find()。
• :has() selector。
• nextUntil()。
• parents()。