如何添加一个类取决于jquery的值 [英] How to add a class depends on value with jquery
本文介绍了如何添加一个类取决于jquery的值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
根据我的问题，如何使用jquery更改CSS？，我现在
From my question How to change CSS with jquery?, I now understant what I need to learn and what I want to do.
我要添加类活动或非活动取决于jquery的值。
I want to add class active or inactive depends on the value with 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是动态生成的。当我点击，启用，停用，编辑和删除时，网页会重新载入。
The following HTML is generated dynamically. When I click, active, inactive, edit and delete, the page is reloaded.
...
...
<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>
推荐答案
<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的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
