如何添加一個類取決於與jquery的值

從我的問題How to change CSS with jquery?，我現在明白我需要學習什麼，我想做什麼。如何添加一個類取決於與jquery的值

我想添加class active或inactive取決於jquery的值。

例如改變

<td align='center'><a href="http://127.0.0.1/ci/index.php/admin/pages/changePageStatus/21">active</a></td>

到

<td align='center'><a class="active" href="http://127.0.0.1/ci/index.php/admin/pages/changePageStatus/21">active</a></td>

和

<td align='center'><a href="http://127.0.0.1/ci/index.php/admin/pages/changePageStatus/15">inactive</a></td>

到

<td align='center'><a class="inactive" href="http://127.0.0.1/ci/index.php/admin/pages/changePageStatus/15">inactive</a></td>

以下HTML是動態生成的。當我點擊，激活，不活動，編輯和刪除，頁面被重新加載。

... 
... 
<tr valign='top'> 

<td align='center'>21</td> 
<td>Kontakt</td> 
<td>/kontakt.html</td><td align='center'><a href="http://127.0.0.1/ci/index.php/admin/pages/changePageStatus/21">active</a></td> 
<td align='center'><a href="http://127.0.0.1/ci/index.php/admin/pages/edit/21">edit</a> | <a href="http://127.0.0.1/ci/index.php/admin/pages/delete/21">delete</a></td> 
</tr> 
<tr valign='top'> 
<td align='center'>15</td> 
<td>Web Design Tjenester</td> 

<td>/webdesigndetails.html</td><td align='center'><a href="http://127.0.0.1/ci/index.php/admin/pages/changePageStatus/15">inactive</a></td> 
<td align='center'><a href="http://127.0.0.1/ci/index.php/admin/pages/edit/15">edit</a> | <a href="http://127.0.0.1/ci/index.php/admin/pages/delete/15">delete</a></td> 
</tr> 
<tr valign='top'> 
<td align='center'>5</td> 
<td>Forsiden</td> 
<td>/forsiden.html</td><td align='center'><a href="http://127.0.0.1/ci/index.php/admin/pages/changePageStatus/5">active</a></td> 

<td align='center'><a href="http://127.0.0.1/ci/index.php/admin/pages/edit/5">edit</a> | <a href="http://127.0.0.1/ci/index.php/admin/pages/delete/5">delete</a></td> 
</tr>

來源

2009-12-15 shin

爲什麼我會減去？請解釋一下。 – shin 2009-12-15 21:39:45

$("a:contains('active'), a:contains('inactive')").each(function() 
{ 
    $(this).addClass($(this).text()); 
});

也許？

來源

2009-12-15 18:05:22 Joel

你可以把你的默認類，然後切換另一個類（activeClass）如

$('a').click(function(myevent) { 
    $(this).toggleClass('activeClass'); 
    myevent.preventDefault();// if you do not want the link to be activated... 
});

注意，你並不真的需要一個鏈接「一」元素，爲這個，如果你是防止違約和一個文本或圖像元素的div可能會更好 - 它沒有默認你需要防止。然後，您可以將.html（）jQuery中的html或.text（）中的文本注入div中。

EDIT1：另外一個趣聞，可以自動檢測使用.hasClass（「激活」）的類如：

$(this).click(function() 
{ 
    if ($(this).hasClass('active')) 
    { 
    // do what you want here 
    }; 
});

來源

2009-12-15 18:17:22

如果你想要類的鏈接根據設定這會做的伎倆在他們的文本上。

<html> 
<head> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script> 
    <style> 
    .inactive 
    { 
    color: red; 
    } 

    .active 
    { 
    color: green; 
    } 
    </style> 

    <script type="text/javascript"> 

    // ensure that the jquery and the page contents has 
    // been loaded, and run the class adding script 
    $(document).ready 
    (
    function() 
    { 
    // get all links, and iterate trough them 
    $('a').each 
    (
     function (index, value) 
     { 
     // set the class of each item to be equal to its text (or inner html) 
     $(value).addClass($(value).html()); 
     } 
    ) 
    } 
    ); 
    </script> 
</head> 
<body> 

    <table> 
    <tr valign='top'> 
    <td align='center'>21</td> 
    <td>Kontakt</td> 
    <td>/kontakt.html</td><td align='center'><a href="http://127.0.0.1/ci/index.php/admin/pages/changePageStatus/21">active</a></td> 
    <td align='center'><a href="http://127.0.0.1/ci/index.php/admin/pages/edit/21">edit</a> | <a href="http://127.0.0.1/ci/index.php/admin/pages/delete/21">delete</a></td> 
    </tr> 
    <tr valign='top'> 
    <td align='center'>15</td> 
    <td>Web Design Tjenester</td> 
    <td>/webdesigndetails.html</td><td align='center'><a href="http://127.0.0.1/ci/index.php/admin/pages/changePageStatus/15">inactive</a></td> 
    <td align='center'><a href="http://127.0.0.1/ci/index.php/admin/pages/edit/15">edit</a> | <a href="http://127.0.0.1/ci/index.php/admin/pages/delete/15">delete</a></td> 
    </tr> 
    <tr valign='top'> 
    <td align='center'>5</td> 
    <td>Forsiden</td> 
    <td>/forsiden.html</td><td align='center'><a href="http://127.0.0.1/ci/index.php/admin/pages/changePageStatus/5">active</a></td> 
    <td align='center'><a href="http://127.0.0.1/ci/index.php/admin/pages/edit/5">edit</a> | <a href="http://127.0.0.1/ci/index.php/admin/pages/delete/5">delete</a></td> 
    </tr> 
    </table> 

</body> 
</html>

來源

2010-07-11 07:23:18

如果您希望根據鏈接文本更改表格行的類別（對我來說這似乎更符合邏輯），您可以使用$（value）.parent（）。parent（）。addClass（$（值）的.html（））; 而不是 \t $（value）.addClass（$（value）.html（））; – 2010-07-11 07:27:21

如何添加一個類取決於與jquery的值

回答

相關問題