2013-04-03 24 views
0

通過對某些JQuery進行一些清理工作。JQuery - 切換() - 使用TR類,但需要圖片中的動作

我有一種情況,我需要使用JQuery Toggle進行摺疊。我在這裏找到了一個很好的例子,其中您使用TR Classes設置切換範圍的外邊界。

這很有效,但TR中的每個元素都是「可點擊的」,如包含財務數額的TD。

研究了一個函數Prepends和image到第一列。該圖片應該是唯一可點擊切換的圖片。點擊時圖像本身在狀態之間交換(顯示「+」或「 - 」)。

我認爲最好的辦法是讓類選擇器專注於第一個TD上的IMG。但是我無法獲得正確的語法。我想知道,由於Prepend注入的圖像會導致問題。

我簡要地測試了使Row Toggle駐留在圖像交換功能中的想法,但遇到了問題。

這裏是的jsfiddle:

http://jsfiddle.net/novadar/Gnnue/94/

這裏是輕微工作職能:

// Enable Row Toggle 
$(document).ready(function() { 
    $(".rowToClick").click(function() { 
     $(this).nextUntil(".rowToClick").toggle(); 
    }); 
}); 

下面是一個功能集中在第一個TD,但不能正常切換(僅將切換TR中的剩餘列)。

// Enable Row Toggle toggle from first cell 
$(document).ready(function() { 
    $(".rowToClick td:nth-child(1)").click(function() { 
     $(this).nextUntil(".rowToClick").toggle(); 
    }); 
}); 

謝謝!

回答

1

因爲圖像是該行的孫子,你需要多達導航到祖父母的切換代碼:

$(document).ready(function() { 
    $(".rowToClick td:nth-child(1) img").click(function() { 
     $(this).closest(".rowToClick").nextUntil(".rowToClick").toggle(); 
    }); 
}); 

FIDDLE

+0

Barmar。謝謝。我知道我很親密。我無法弄清楚這種關係。我認爲它與它所在的運輸署保持一致。 – Novadar

+0

我覺得'$(this).closest('tr')'會更好 –

+0

@ArunPJohny謝謝。我已將它改爲'.closest(「。rowToClick」)',因此它與用於查找圖像的選擇器一致。 – Barmar