javascript - 根据html属性值分配css类

Question

我有几个链接如下。我的 JS 方法返回“天”或“周”。基于该返回值，我想将 class="active"分配给数据周期值与返回值匹配的其中之一。有人可以建议 1-2 行 JS 代码来实现这一点。

 <a href="#" class="hourlyChartPeriod" data-period="days">D</a>
 <a href="#" class="hourlyChartPeriod" data-period="week">W</a>

Answer 1

这在使用 JQuery 时非常简单:

$("a[data-period='" + someMethod() + "']").addClass("active");

这当然假设您的方法“返回‘天’或‘周’”被称为 someMethod。

这是一个 CodePen demo .

如果您还需要确保其他不匹配的元素不具有active 类，请将其也从它们中移除。有几种方法可以做到这一点。这个漂亮干净:

$("a[data-period]").removeClass("active");
$("a[data-period='" + someMethod() + "']").addClass("active");

...这是进一步优化的:

$("a[data-period]")
    .removeClass("active")
    .filter("a[data-period='" + someMethod() + "']")
    .addClass("active");

...因为它不会再次从 DOM 中重新选择，而是会重用那些初始的 a[data-period] 结果。可悲的是，它仍然会导致从元素中删除类，而这些元素最终还是会拥有它。但是，如果您没有 ton 个具有 data-period 的元素(阅读:数百个)，那真的没有关系。

不过，如果你想(或需要)坚持下去，这甚至可以进一步优化:

$("a[data-period].active")
    .not($("a[data-period='" + someMethod() + "']").addClass("active"))
    .removeClass("active");

...但更难阅读。