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

时间:2013-07-03 23:45:40

标签: javascript jquery html css

我有一个HTML / CSS菜单,我需要与传统的ASP应用程序集成。根据用户或环境的不同,某些菜单项会根据各种客户端条件显示或隐藏。

大多数情况下,客户端条件决定是显示还是隐藏单个菜单项,但有时一组项目可能在客户端需要相同的条件。如果这令人困惑,我会事先道歉,但这是一个例子:

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

在上面的示例中,只有变量bFoo == 60才会显示链接1,2和4。无论如何都应显示链接3.

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

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

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

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

为了清晰起见,我倾向于第一个选项,但我想知道是否有更好的选择,我还没有考虑过。整个菜单中包含100多个链接的上述示例有不同的变体,因此我希望我的解决方案尽可能保持可维护性。我上面提到的是我能想到的最好的,或者我现在真的很愚蠢,忽略了一个明显而简单的解决方案?

我希望我所要求的是有道理的。如果我的问题不清楚,请告诉我,我会尝试更好地解释。

2 个答案:

答案 0 :(得分:1)

ID并不重要 - 请采用适合您代码的方法。

但我会避免使用eval。使用这样的东西:

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

答案 1 :(得分:1)

我的评论是一个答案(在这里得到评论;))

if (bFoo) {
    $(".a"+bFoo).toggle();
}