Question

从我的问题How to change CSS with jquery?，我现在明白我需要学习什么以及我想做什么。

我想添加类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>

Answer 1

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

也许？

Answer 2

您可以将默认类放入，然后切换另一个类（activeClass），例如

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

请注意，您实际上并不需要链接'a'元素，因为如果您要阻止默认设置，并且带有文本或图像元素的div可能会更好 - 它没有您需要阻止的默认值。然后，您可以使用.html（）jQuery或带有.text（）的文本在div中注入html。

EDIT1：另一个小问题，您可以使用.hasClass（'active'）自动检测类，例如：

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

Answer 3

如果你想根据文本将链接设置为链接，那么这就可以了。

<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>

如何添加类依赖于jquery的值

3 个答案: