Question

我有几个像这样的链接，里面有一个动态数字。我想将子跨度的类从橙色更改为红色。这是链接：

<a id="details_104" href="#"><span class="status orange"></span></a>
<a id="details_105" href="#"><span class="status orange"></span></a>
<a id="details_106" href="#"><span class="status orange"></span></a>

我尝试使用此jQuery代码执行此操作：

$("a #details_" + employee_id).removeClass("orange");
$("a #details_" + employee_id).addClass("red");

变量employee_id填充了正确的值，但我没有看到任何事情发生。我在这做错了什么？谢谢！

Answer 1

$("a#details_" + employee_id + ' span.status').removeClass("orange");
$("a#details_" + employee_id + ' span.status').addClass("red");

您选择的是a代码，而不是orange类实际所在的范围。将span.status添加到选择器的末尾会找到具有您的员工ID的链接，然后在其中查找范围。现在removeClass()和addClass()对span进行操作。

此外，这可以链接，因为jQuery很棒。

$("a#details_" + employee_id + ' span.status')
    .removeClass("orange").addClass("red");

这也更快，因为它只对DOM运行一次选择器。

Answer 2

$("a #details_" + employee_id)

应该是

$("a#details_" + employee_id + " span.status")

甚至只是

$("#details_" + employee_id + " span.status")

（您的ID都是唯一的，对吧？;））

这就是全部：）

Answer 3

尝试：

var el = $("a#details_" + employee_id + " span.status");
el.removeClass("orange").addClass("red");

修改添加的范围。

一次查找元素比快两次。

Answer 4

试试这个：

$("#details_" + employee_id).children().removeClass("orange");
$("#details_" + employee_id).children().addClass("red");

或

$("#details_" + employee_id).find("span").removeClass("orange");
$("#details_" + employee_id).find("span").addClass("red");

希望有所帮助

Answer 5

您的选择器正在寻找该ID作为A元素的子元素。您只需$("#details_" + employee_id + " span").removeClass("orange").addClass("red");即可找到该ID的子级SPAN。

Answer 6

你需要删除a和＃之间的空格，因为id在同一个项目中，而不是孩子。

$("a#details_" + id)

Answer 7

将a #details_更改为#details_

Answer 8

您的选择器正在查找标识为details_xx的元素，该元素是a元素的子元素，当您真正希望span元素是{{1}的子元素时}}

一般来说，当使用ID选择器时，没有必要在它们前面加上任何东西，因为元素应该是唯一的（我说一般来说，你可能需要特别处理只在身体有特定的页面上类）。

所以选择器会变成：

它们也可以链接这些方法，因为它们都作用于同一个元素：

$("#details_" + employee_id + " span").removeClass("orange");
$("#details_" + employee_id + " span").addClass("red");

我可能还建议您使用比$("#details_" + employee_id + " span").removeClass("orange").addClass("red");和orange更多的语义类名称，它们现在可以使用，但是当您希望它们变为蓝色和绿色时会发生什么？

按动态类选择元素

8 个答案: