Как добавить класс зависит от значения с помощью jquery - PullRequest
Новая
       12

Как добавить класс зависит от значения с помощью jquery

0 голосов
/ 15 декабря 2009

Из моего вопроса Как изменить CSS с помощью jquery? , теперь я понимаю, что мне нужно изучить и что я хочу сделать.

Я хочу добавить класс active или notactive в зависимости от значения с помощью 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>

Ответы [ 3 ]

1 голос
/ 15 декабря 2009

Вы можете поместить свой класс по умолчанию, а затем переключить другой класс (activeClass), например 

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

Обратите внимание, что вам на самом деле не нужен элемент link 'a', для этого, если вы предотвращаете значения по умолчанию, и div с текстом или элементом изображения в нем может быть лучше - он не имеет значения по умолчанию, которое вам нужно будет предотвратить. Затем вы можете вставить html в div с помощью .html () jQuery или текст с .text ().

РЕДАКТИРОВАТЬ1: Еще один лакомый кусочек, вы можете автоматически определить класс с помощью .hasClass ('active'), например: 

$(this).click(function()
{
   if ($(this).hasClass('active'))
   {
    // do what you want here
   };
});
1 голос
/ 11 июля 2010

Это поможет, если вы хотите установить класс для ссылок в зависимости от их текста. 

<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>
1 голос
/ 15 декабря 2009 
$("a:contains('active'), a:contains('inactive')").each(function() 
{ 
    $(this).addClass($(this).text()); 
});

Возможно

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...