Целевой элемент с таким же классом

Question

Это то, что я пытаюсь достичь: Если я нажимаю на месяц #month > li >a он выцветает в списке, который имеет имя класса из в этом месяце. (И скрывает список других месяцев, поэтому показано только 1) Звучит спокойно, но я не знаю, какой из них был бы правильным способом сделать это с помощью jQuery.

У меня есть эта разметка:

<ul id="month" class="clearfix"> 
     <li> 
      <a href="javascript:void(0)" onclick="calendaractive(this);">January</a> 
     </li> 
     <li class="active"> 
      <a href="javascript:void(0)" onclick="calendaractive(this);">February</a> 
     </li> 
     <li> 
      <a href="javascript:void(0)" onclick="calendaractive(this);">March</a> 
     </li> 
    </ul> 

    <ul class="day january"> 
     <li> 
      <a href="javascript:void(0)">1</a> 
     </li> 
     <li> 
      <a href="javascript:void(0)">2</a> 
     </li> 
     <li> 
      <a href="javascript:void(0)">3</a> 
     </li> 
    </ul> 
    <ul class="day february"> 
     <li> 
      <a href="javascript:void(0)">1</a> 
     </li> 
     <li> 
      <a href="javascript:void(0)">2</a> 
     </li> 
     <li> 
      <a href="javascript:void(0)">3</a> 
     </li> 
    </ul> 
    <ul class="day march"> 
     <li> 
      <a href="javascript:void(0)">1</a> 
     </li> 
     <li> 
      <a href="javascript:void(0)">2</a> 
     </li> 
     <li> 
      <a href="javascript:void(0)">3</a> 
     </li> 
    </ul> 

И это мой сценарий:

function calendaractive(that){ 
     $(that).find().next('.day').fadeIn(); 
    } 

Answer 1

Использование текста, представленного пользователю в качестве источника данных, не является хорошей идеей. Например, что, если позже вы решите поддерживать другие языки или даже использовать сокращенную версию (JAN, FEB и т. Д.)? он сломает ваш код. Помните: всегда разделяйте логику и презентацию.

Вместо этого, я бы дать месяцев тот же атрибут data как дни class:

<ul id="month" class="clearfix"> 
     <li data-month="january">January</li> 
     <li data-month="february" class="active">February</li> 
     <li data-month="march">March</li> 
    </ul> 

    <ul class="day january"> 
     <li> 
      <a href="javascript:void(0)">1</a> 
     </li> 
     <li> 
      <a href="javascript:void(0)">2</a> 
     </li> 
     <li> 
      <a href="javascript:void(0)">3</a> 
     </li> 
    </ul> 
    <ul class="day february"> 
     <li> 
      <a href="javascript:void(0)">1</a> 
     </li> 
     <li> 
      <a href="javascript:void(0)">2</a> 
     </li> 
     <li> 
      <a href="javascript:void(0)">3</a> 
     </li> 
    </ul> 
    <ul class="day march"> 
     <li> 
      <a href="javascript:void(0)">1</a> 
     </li> 
     <li> 
      <a href="javascript:void(0)">2</a> 
     </li> 
     <li> 
      <a href="javascript:void(0)">3</a> 
     </li> 
    </ul> 

JQuery:

$("#month>li").click(function(){ 

    // hide all months but the selected one 

    $("#month>li").hide(); 
    $(this).show(); 

    // hide all but the days of the selected month 

    current_month = $(this).data("month"); 
    $(".day").hide(); 
    $(".day."+current_month).show(); 
}); 

Вы также заметите, что я снял много раздутой ненужными HTML. Существует еще много возможностей для удаления и восстановления, но я оставлю это вам (например, как обматывать все списки дней с помощью div, т. Е. Размещать их по именам, и удалять повторяющийся класс .day из отдельных ul?).

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

Answer 2

Вы можете попробовать это -

function calendaractive(that){ 
     $('.day').filter(function(){ 
      var text = $.trim($(that).text().toLowerCase()); 
      return $(this).hasClass(text); 
     }).fadeIn(); 
} 

Answer 3

Попробуйте эту функцию:

function calendaractive(that){ 
    var text = $(that).text().toLowerCase(); 
    $('ul.day').each(function(o){ 
     if($(this).hasClass(text)) { 
      $(this).fadeIn(); 
     } else { 
      $(this).fadeOut(); 
     } 
    }); 
} 

Fiddle - http://jsfiddle.net/picklespy/CDcLy/2/

Надеюсь, это поможет.

Answer 4

изменен ваш код. Протестировано

<script src="http://code.jquery.com/jquery-2.0.1.min.js"></script> 

<ul id="month" class="clearfix"> 
    <li> 
     <a href="javascript:void(0)" id="january" onclick="calendaractive(this.id);">January</a> 
    </li> 
    <li class="active"> 
     <a href="javascript:void(0)" id="february" onclick="calendaractive(this.id);">February</a> 
    </li> 
    <li> 
     <a href="javascript:void(0)" id="march" onclick="calendaractive(this.id);">March</a> 
    </li> 
</ul> 

<ul class="day january"> 
    <li> 
     <a href="javascript:void(0)">1</a> 
    </li> 
    <li> 
     <a href="javascript:void(0)">2</a> 
    </li> 
    <li> 
     <a href="javascript:void(0)">3</a> 
    </li> 
</ul> 
<ul class="day february"> 
    <li> 
     <a href="javascript:void(0)">1</a> 
    </li> 
    <li> 
     <a href="javascript:void(0)">2</a> 
    </li> 
    <li> 
     <a href="javascript:void(0)">3</a> 
    </li> 
</ul> 
<ul class="day march"> 
    <li> 
     <a href="javascript:void(0)">1</a> 
    </li> 
    <li> 
     <a href="javascript:void(0)">2</a> 
    </li> 
    <li> 
     <a href="javascript:void(0)">3</a> 
    </li> 
</ul> 


<script> 

function calendaractive(that){ 
    $(".day").fadeOut(0.5); 
    $("."+that).fadeIn(); 
} 


</script> 

Answer 5

Кроме того, если в конце, самая короткая:

function calendaractive(that){ $('.day:not(.'+$(that).html().toLowerCase()+')').fadeOut(); $('.day'+'.'+$(that).html().toLowerCase()).fadeIn(); }