javascript - 将特定客户端逻辑应用于一组相关元素的最佳方法

Question

我有一个 HTML/CSS 菜单，我需要将其与遗留 ASP 应用程序集成。根据用户或环境，某些菜单项会根据各种客户端条件显示或隐藏。

大多数情况下，客户端条件决定是显示还是隐藏单个菜单项，但有时一组元素可能需要客户端具有相同的条件。如果这令人困惑，我提前道歉，但这里有一个例子:

<li>Link 1</li> 
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>

在上面的示例中，链接 1、2 和 4 应该仅在变量 bFoo == 60 时显示。无论如何都应该显示链接 3。

我想知道将特定逻辑应用于一组可能连续或不连续的元素的最佳方法是什么。显然，我可以为每个元素分配一个单独的 ID，并将它们分组到我的选择器中，如下所示:

$("#link1, #link2, #link4").toggle(bFoo == 60);

我也可以像这样给元素一个公共(public)类:

$(".special-links").toggle(bFoo == 60);

为了清楚起见，我倾向于第一个选项，但我想知道是否有我尚未考虑的更好的选项。在包含 100 多个链接的整个菜单中，上述示例有不同的变体，因此我希望我的解决方案尽可能易于维护。我上面提到的是我所能期望的最好的，还是我现在真的很愚蠢而忽略了一个明显而简单的解决方案？

我希望我的要求是有意义的。如果我的问题不清楚，请告诉我，我会尽力解释得更好。

Answer 1

Id 无关紧要 - 采用更适合您的代码的方法。

不过，我会避免使用 eval。使用这样的东西:

if (bFoo == 60) {
    $("#link1, #link2, #link4").toggle();
}