高亮點擊李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不必要的，我已經給出了在這個答案的上述部分的原因。