具有相同类别的目标元素

Question

这就是我要实现的目标：如果单击#month > li >a一个月，则该月在具有该 月 的班级名称的列表中 #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

试试这个功能：

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

小提琴-http: //jsfiddle.net/picklespy/CDcLy/2/

希望能帮助到你。

Answer 2

你可以试试这个-

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

Answer 3

使用呈现给用户的文本作为数据源不是一个好主意。 例如，如果您以后决定支持其他语言甚至使用缩写版本（JAN，FEB等）怎么办？ 它将破坏您的代码。 切记：始终将逻辑和表示分开。

相反，我将给这些月份与days class相同的data属性：

   <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();
});

您还会注意到，我删除了许多of肿的不必要的HTML。 还有更多要删除和重建的内容，但我将留给您（例如，如何用div包装所有的天列表-即，命名它们的.day -并从单个ul中删除重复的.day类？）。

最后说明：对一组元素使用事件处理程序时，不需要将函数分别附加到每个元素上-而是使用脚本将事件绑定到所有有问题的元素上，并使用一个声明-如上所示-并保持干燥。

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(); }