2012-02-16 81 views
1

我有一個無序的列表,它是動態創建的,我需要添加一個名爲'selected'的類給一個特定的-li-。添加一個類到一個特定的li元素

-ul-是星期幾的列表,需要選擇的-li-是當天。不幸的是,我無法弄清楚如何將這個類添加到一個元素中,並且每當我嘗試添加此類時,整個列表就會消失。這是我的代碼:

var weekday = new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat"); 
var today = day.getDay(); 
for(var x=0;x<=6;x++){ 
    $('ul').append(
     $('<li>') 
     .toggleClass(function(){ 
      if(today == x){ return 'selected'; } 
      else{ return ''; }; 
     }); 
     .append($('<a href = "#' + weekday[x].toLowerCase() + '">' + weekday[x] + '</a>'));  
    );  
$('li:last').addClass('last-child'); 

有人可以幫我弄清楚如何將這個類添加到當天的-li-嗎?

回答

2

繼從其他意見建議和修復一些錯誤固定代碼:

var weekday = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'], 
    today = new Date().getDay(), 
    list = $('ul'); 

for(var x=0;x<=6;x++){ 
    list.append(
     $('<li></li>', { 
      html : '<a href = "#' + weekday[x].toLowerCase() + '">' + weekday[x] + '</a>' 
     }).toggleClass(function(){ 
      if(today == x){ 
       return 'selected'; 
      } 
     }).bind('click', function(e){ 
      e.preventDefault(); 
      $(this).parent().children('li').removeClass('selected'); 
      $(this).addClass('selected'); 
     }) 
    ); 
} 

$('li:last').addClass('last-child'); 
+0

這會在頁面加載時將「selected」類添加到正確的li元素中,但當用戶單擊不同鏈接時它根本不會改變 – 2012-02-16 04:27:09

+0

我添加了單擊事件處理程序來更改當用戶點擊鏈接時的類。 – michaeljdennis 2012-02-16 05:14:02

+0

這就是我在尋找我的問題,但是當我問我的問題時沒有意識到這一點,所以也許你可以幫助我,如果不是,我仍然在努力自己......我是使用yahoo tabview,而這個無序列表是yui-nav(標籤)。每個標籤附帶的內容區域都有類別「內容」。基本上,每個內容區域只應在相應的li被選中時顯示。上面的答案有jQuery.map處理這個問題,但不會選擇今天匹配的li。這段代碼就是這樣做的,但是所有的內容區域都會顯示出來。有任何想法嗎? – 2012-02-16 07:22:29

4
if(today = x) 
  • =分配
  • ==比較

做的另一種方式:

var weekday = new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat"); 
var lis = []; 
var today = new Date().getDay(); 
jQuery.map(weekday, 
    function(day, ind){ 
     var cls = ind===today ? " class='selected'" : ""; 
     lis.push("<li><a" + cls +" href='#" + day.toLowerCase() + "'>"+ day + "</a></li>"); 
    } 
); 
$("ul").html(lis.join("")); 
+0

好吧,我添加了額外的=,但我的代碼仍然不工作 – 2012-02-16 01:40:34

+0

感謝您的幫助!這給了我一個用戶點擊的鏈接的「選擇」類,但我也需要它將選擇的類添加到包含「今天」的li元素,而且它不會這樣做,而且我甚至不會知道從哪裏開始編輯所有這些 - 我將不得不查找1/2這個東西的參考,以瞭解最新的內容。再次感謝您的幫助! – 2012-02-16 02:43:25

1

是一天定義爲新的日期?

var day = new Date();

或var today = new Date()。getDay();

+0

我今天有var = new Day.getDay();我添加了var day = new Date();但結果沒有任何區別 – 2012-02-16 04:28:35

1

試一下:

var weekday = new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat"); 
var d = new Date(); 
var today = d.getDay(); 

for(var x=0;x<=6;x++){  
    $('ul').append(   
     $('<li><a href = "#' + weekday[x].toLowerCase() + '">' + weekday[x] + '</a>') 
    );  

    $('li:last-child').addClass('last-child'); 

    if(x == today) 
    { 
     $('li:gt('+(x - 1)+')').toggleClass('selected'); 
    } 
} 
+0

這呈現與上面的答案相同的結果。對我來說,越來越明顯的是,我的原始代碼與任何會帶來我期待的具體結果的東西都是牽強的 – 2012-02-16 04:31:38

相關問題