Question

我有以下由PHP动态生成的HTML。当我点击活动时，它会变为非活动状态，反之亦然。

我为jquery操作添加了div class ='status'。（我需要吗？如果没有这个div，我可以这样做吗？）

我想在单击活动时将CSS class ='status'更改为class ='inactive'，当我点击不活动时将CSS类更改为'active'，以便我可以更改颜色或添加bg图像等

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 ='status'，所以如何告诉jquery我想要更改我点击的css。

- 更新2 -

我想检查值（活动/非活动）。并将它的值添加为类。 e.x如果其值处于活动状态，则添加css class ='active'，如果它处于非活动状态，则class ='inactive'等。我可以做吗？或者您有其他建议我应该怎么做。

- 更新3 -

谢谢大家。你们好棒。我测试了一些代码。但问题是，当我单击活动时，它会更改bg，但随后刷新页面以通过php / mysql更改为非活动状态。所以这意味着每次我点击值（活动/非活动）更改。所以我认为正如我在更新2中所述，添加css类可能是个好主意取决于值。欢迎提出更多建议，我感谢他们。（我还没有用AJAX做过......）

- 更新4 -

使用ID不是一个好主意，因为表是动态创建的。我可以添加ID，但会添加更多代码。所以我认为上课更好。

- 更新5 -

我在这里提出了我的问题。 How to add a class depends on value with jquery

在此之后，我现在知道自己想做什么。

Answer 1

jQuery具有toggleclass（），removeClass（）和addClass（）的函数。这些应该可以帮助你。

没有看到整个HTML有点难以建议选择器。如果你为你的div（例如mydiv）分配了一个id，那么你可以拥有

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

或者只是为了翻转它们：

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

这很好地利用了链接

Answer 2

关于你的第一个问题，你可能会把那个班级移到封闭的<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（或非活动状态）。

Answer 3

.addClass() .removeClass()

编辑：在响应您的更新时，您可以在div中使用onclick（）函数来更改该特定div的类。

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

请测试该代码，但我认为这可能是您正在寻找的。

Answer 4

最简单的解决方案是使用jQuery中的内置切换函数，它允许您使用标准的jQuery选择器语法切换指定类的状态：

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

请参阅doc page了解更多

Answer 5

如果你不想要你提到的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 a”）将选择所有标签后代。只给孩子一个标签td：

$("td > a")

如何用jquery更改CSS？

5 个答案: