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

尝试此功能：

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等），该怎么办？它会打破你的代码。记住：始终将逻辑和演示分开。

相反，我会给月份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包装所有日期列表 - 也就是命名它们 - 并从单个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(); }

具有相同类的目标元素

5 个答案: