1

这就是我想要实现的目标：如果我点击一个月份#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();
    }
4

5 回答 5

3

试试这个功能：

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/

希望能帮助到你。

于 2013-05-28T12:31:28.200 回答
2

你可以试试这个——

function calendaractive(that){
       $('.day').filter(function(){
             var text = $.trim($(that).text().toLowerCase());
             return  $(this).hasClass(text);
       }).fadeIn();
}
于 2013-05-28T12:24:08.787 回答
1

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

相反，我会给月份赋予data与 days 相同的属性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>

查询：

$("#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 中删除重复类？）。

最后一点：当对一组元素使用事件处理程序时，您不需要将函数单独附加到每个元素 - 相反，使用脚本将事件绑定到具有一个声明的所有相关元素 - 如上所示 -并保持干燥。

于 2013-05-28T12:45:59.703 回答
0

将您的代码修改为此。经过测试

 <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>
于 2013-05-28T12:42:14.250 回答
0

此外，如果迟到，最短：

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

于 2013-05-28T12:54:41.117 回答