如何用jQuery改變CSS？

我有以下由PHP動態生成的HTML。當我點擊活動時，它變爲不活動，反之亦然。如何用jQuery改變CSS？

我添加DIV CLASS = '狀態' jQuery的操縱。（我需要它嗎？我可以做到這一點沒有這個div？）

我想改變CSS class ='status'class ='inactive'當我點擊活動，當我點擊不活動更改CSS類爲'活動「爲好，這樣我就可以改變顏色或添加背景圖片等等

HTML

... 
...  
<tr valign='top'> 
    <td align='center'>21</td> 
    <td>Kontakt</td> 
    <td>/kontakt.html</td> 
    <td align='center'> 
    <div class="status"> 
     <a href="http://127.0.0.1/ci/index.php/admin/pages/changePageStatus/21">active</a> 
    </div> 
    </td> 
    <td align='center'>... 
    ... 
    </td> 
</tr>

我使用jQuery和我需要一些指導。

誰能告訴我一些jQuery代碼嗎？

--UPDATE--

有許多DIV與CALSS =「狀態」，所以我怎麼能告訴我要改變我點擊的CSS jQuery的。

--update 2--

我想要查詢的值（有效/無效）。並將它的值添加爲類。 e.x如果它的值是活動的，然後添加CSS類=「主動」，如果它是無效的，則class =「無效」等我該怎麼辦呢？或者你有其他建議我應該怎麼做。

--UPDATE 3--

謝謝大家。你們好棒。我測試了一些代碼。但問題是，當我點擊活動時，它會更改bg，但隨後刷新頁面以通過php/mysql更改爲非活動狀態。所以這意味着每次點擊值（活動/非活動）更改。所以我認爲，正如我在更新2中所述，添加css類取決於值可能是個好主意。更多的建議，歡迎和我欣賞他們。（我還沒有AJAX這麼做過...）

--update 4 -

使用ID是不是一個好主意，因爲是動態創建的表。我可以添加ID，但會添加更多代碼。所以我覺得上課比較好。

--update 5--

我搬到這裏我的問題。 How to add a class depends on value with jquery

在此之後，我現在知道我想要做的。

來源

2009-12-15 shin

你想住綁定這些元素（特別是如果他們沒有將有ID）。實時綁定使得與選擇器相匹配的所有當前和未來元素都將被選中。進一步閱讀：http://docs.jquery.com/Events/live – ddango 2009-12-15 17:19:04

重新關於如何告訴jQuery您點擊哪個代碼的更新，您需要觸發代碼中某個實體的onclick事件的切換代碼（例如， div或錨參考）。如果你使用標準的'this'選擇器，切換操作將不會「貪婪」（即它不會切換*頁面中所有分類爲「激活」的東西或其他） – Ben 2009-12-15 17:19:40

re：第二次更新 - 假設你通過事件處理程序（你應該！）綁定，那麼你可以做一些類似var value = $（this）.text（）的事情。並做條件從那 – ddango 2009-12-15 17:28:06

jQuery有功能toggleclass（）removeClass（）方法和addClass（）。這些應該可以幫助你。

沒有看到整個HTML它有點困難，建議選擇。如果你爲你的div分配了一個id（例如mydiv），那麼你可以有

$("#mydiv").removeClass('status').addClass('inactive');

或者只是給他們無論翻轉：

$("#mydiv").toggleClass('status').toggleClass('inactive');

這使得使用鏈接很好地

來源

2009-12-15 17:07:00

我認爲這是最接近最佳，因爲它使用'id'屬性。我更喜歡'toggleClass（）'到另外兩個。但是，我只會將其應用於'非活動'班。 CSS允許一個元素有兩個（或更多）類，所以這兩個狀態將是'狀態'和'狀態無效'。然後，活動的CSS樣式進入CSS類的'.status'，非活動樣式進入CSS類的'.inactive'。必須小心確保'.inactive'規則否決級聯中的'.status'規則。 – 2009-12-15 17:22:54

我同意你的觀點：CSS級聯。但是，我認爲在這種情況下使用ID更不明智，因爲它看起來像是具有重複結構的動態內容列表。 – ddango 2009-12-15 17:34:35

.addClass() .removeClass()

編輯：在效應初探至你的更新，你可以在你的div中有一個onclick（）函數來改變那個特定div的類。

<div onclick="changeClass" id="myId"></div> 
function changeClass() { 
    $(this).toggleClass('status').toggleClass('inactive'); 
}

請測試該代碼，但我認爲這可能是您正在尋找的。

來源

2009-12-15 17:07:37 ryanday

別忘了，你可以使用鏈接，所以在第一個鏈接的末尾鏈接第二個toggleClass！ – 2009-12-15 17:19:21

是的，好點！我也喜歡ddango的回答，將.click（）函數附加到每個.status和.inactive div。 – ryanday 2009-12-15 17:20:54

你簡單的解決辦法是使用內置切換功能的jQuery，這將讓你切換使用標準的jQuery選擇語法您指定類的狀態：

$(this).toggleClass("inactive");

更多請見doc page

來源

2009-12-15 17:09:41 Ben

關於您的第一個問題，您可以將該課程移動到附件<td />（儘管背景圖片在那裏並不總是很好玩）。

要添加/刪除與jQuery的一類，你可以做一些像這樣：

$('div.status').addClass('inactive'); 
$('div.status').removeClass('status');

或者，如果你想讓它開火點擊使用toggleClass

$('div.status', 'div.inactive').live("click", function(){ 
    $(this).toggleClass("inactive").toggleClass("status"); 
     });

這也將只激發你點擊的特定div.status（或不活動）。

來源

2009-12-15 17:12:15 ddango

如果您不想要div，您可以將其刪除並選擇td中的所有鏈接（或將類添加到特定的td標籤並調整選擇器：$（'td.status'））把選擇範圍縮小到只有那些）。

//Click Handler to toggle active state of all links descendant of all td tags 
$("td a").click(function(){ 
//add/remove inactive class and add/remove active smoothly over 1/2 second in total 
$(this).toggleClass("inactive, 250").toggleClass("active", 250); 
});

注：

$（「TD一」）將選擇所有標籤的後裔。如果只讓孩子TD的標籤：

$("td > a")

來源

2009-12-15 17:54:58 micahwittman

如何用jQuery改變CSS？

回答

相關問題