Лучший подход для применения конкретной клиентской логики к набору связанных элементов

У меня есть 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 должна отображаться независимо.

Мне интересно, какой лучший подход для применения конкретной логики к группе элементов, которая может быть или не быть последовательной. Очевидно, я мог бы назначить отдельный идентификатор каждому элементу и сгруппировать их в своем селекторе следующим образом:

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

Я мог бы также дать элементам общий класс:

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

Я склоняюсь к первому варианту для ясности, но мне интересно, есть ли лучший вариант, который я еще не рассмотрел. Существуют различные варианты вышеприведенного примера во всем меню, которое содержит ссылки 100+, поэтому я хочу, чтобы мое решение было максимально удобным для обслуживания. Это то, что я упомянул выше, на что я могу надеяться, или я действительно глуп сейчас и не замечаю очевидного и легкого решения?

Надеюсь, что то, о чем я прошу, имеет смысл. Если мой вопрос неясен, пожалуйста, дайте мне знать, и я попытаюсь объяснить это лучше.

2 ответа

Идентификатор не имеет значения - возьмите любой подход, который лучше подходит для вашего кода.

Однако я бы избежал eval. Используйте что-то вроде этого:

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


Я даю свой комментарий для ответа (чтобы получить комментарии здесь;))

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

licensed under cc by-sa 3.0 with attribution.