2012-02-16 2 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, когда страница загружается, но она не изменяется вообще, когда пользователь нажимает на другую ссылку. –

+0

Я добавил обработчик события click для изменения класс, когда пользователь нажимает на ссылки. – michaeljdennis

+0

это делает то, что я ищу в своем вопросе, но то, чего я не понимал, задавая свой вопрос, так, может быть, вы можете мне помочь, если я еще не работаю над этим сам ... Я используя yahoo tabview, и этот неупорядоченный список - это yui-nav (вкладки). области содержимого, которые идут с каждой вкладкой, имеют класс «контент». В принципе, каждая область содержимого должна отображаться только тогда, когда выбран соответствующий лимит. ответ выше, который имеет дело с jQuery.map, но не выбирает ли, который соответствует сегодня. этот код делает это, но все области содержимого показывают все время. есть идеи? –

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

ок, я добавил дополнительные =, но мой код до сих пор не работа –

+0

Спасибо за помощь! Это дает мне «выбранный» класс для ссылки, на которую пользователь нажимает, но мне также нужно, чтобы этот класс добавлялся к элементу li, который содержит «сегодня», и он этого не делает, и я даже не знаете, где начать редактирование всего этого - мне нужно будет найти ссылку на 1/2 этого материала, чтобы понять, что происходит. Спасибо еще раз за помощь! –

1

ли день определяется как новая дата?

var day = new Date();

или var today = new Date(). GetDay();

+0

У меня есть var today = new Day.getDay(); и я добавил var day = new Date(); но нет никакой разницы в результатах. –

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

Это дает те же результаты, что и ответ над ним. Мне становится очевидным, что мой оригинальный код был надуман из всего, что принесет конкретные результаты, которые я ищу –

Смежные вопросы