高亮点击李jquery

Question

我想突出李元素，我知道有绝对有效的方式来做我想做的事情。点击突出显示选定的李，我使用的方法不是很有效，因为你可以看到。如果我有20个李，那么这样做没有意义。

HTML：

<ul> 
<li id="level1"><a>Light</a></li> 
<li id="level2"><a>Medium</a></li> 
<li id="level3"><a>Enterprise</a></li> 
</ul> 

代码： applicationLicenseLevel是通过一个数字（1,2或3）

此开关一个的document.ready内（）调用​​。

switch (applicationLicenseLevel) { 
        case 1: 
         $('#level1').addClass('activeLicenseLevel'); 
         $('#level2').removeClass('activeLicenseLevel'); 
         $('#level3').removeClass('activeLicenseLevel'); 
         break; 
        case 2: 
         $('#level2').addClass('activeLicenseLevel'); 
         $('#level1').removeClass('activeLicenseLevel'); 
         $('#level3').removeClass('activeLicenseLevel'); 
         break; 
        case 3: 
         $('#level3').addClass('activeLicenseLevel'); 
         $('#level1').removeClass('activeLicenseLevel'); 
         $('#level2').removeClass('activeLicenseLevel'); 
         break; 
       } 

Answer 1

你可以考虑用与jQuery的“水平”使用starts-with selector ^=开始，然后将该类添加到您的当前ID属性移除所有的人：

// Remove the active class from every element that starts with "level" 
$('[id^="level"]').removeClass('activeLicenseLevel'); 
$('#level' + applicationLicenseLevel).addClass('activeLicenseLevel'); 

Answer 2

不要为该20+ li元素设置ID。这将为具有全局作用域中id的每个元素创建引用，以用于命名访问。

意见建议：只要给它UL。如果需要区分其他UL，也是如此。

var lis = $("ul li").click(function(){ 
    lis.removeClass("activeLicenseLevel"); 
    $(this).addClass("activeLicenseLevel"); 
}); 

我没有注意到你的真实情况。为你的情况，你可以这样做，

var lis = $("ul li").removeClass("activeLicenseLevel"); 
lis.eq(applicationLicenseLevel).addClass("activeLicenseLevel"); 
//.eq(index) will get the element based on the supplied index from the element collection 

不要设置ID不必要的，我已经给出了在这个答案的上述部分的原因。