Question

我正在尝试为一个动画流畅的日历制作月份切换器。我认为我非常接近，但在这里遗漏了一些东西。

HTML：

<div id="monthscontainer">
    <div class="months">
        <h1 class="month1">JANUARY</h1>
        <h1 class="month2">FEBRUARY</h1>
        <h1 class="month3">MARCH</h1>
        <h1 class="month4">APRIL</h1>
        <h1 class="month5">MAY</h1>
        <h1 class="month6">JUNE</h1>
    </div>
</div>

CSS：

#monthscontainer {
position: absolute;
top: 60px;
width: 840px;
height: 40px;
overflow: hidden;
}

.months {
position: relative;
left: 0px;
height: 40px;
width: 2000px;
transition: all 1s ease;
}

.months.moved {
transform: translate(-240px,0px);
transition: all 1s ease;
}

.month1 {
float: left;
width: 240px;
text-align: left;
cursor: pointer;
color: #A2A2A2;
padding: 0px;
transition: color 1s ease;
}

.month2 {
float: left;
text-align: center;
width: 240px;
margin-left: 60px;
margin-right: 60px;
padding: 0px;
transition: color 1s ease;
}

.month3 {
float: left;
width: 240px;
text-align: right;
cursor: pointer;
color: #A2A2A2;
padding: 0px;
transition: color 1s ease;
}

.month4 {
float: left;
width: 240px;
text-align: right;
cursor: pointer;
color: #A2A2A2;
padding: 0px;
transition: color 1s ease;
}

.month5 {
float: left;
width: 240px;
text-align: right;
cursor: pointer;
color: #A2A2A2;
padding: 0px;
transition: color 1s ease;
}

.month6 {
float: left;
width: 240px;
text-align: right;
cursor: pointer;
color: #A2A2A2;
padding: 0px;
transition: color 1s ease;
}

.month1:hover, .month3:hover {
color: #484747;
transition: color 1s ease;
}

jQuery的：

<script type="text/javascript">
        // Show #fireblockartists

        //<![CDATA[             
        $(window).load(function() {
            $('.month3').on('click',slide);
            $('.month3').click(function(){
                $('.month3').on('click',slide);
            });
        });                     
        function slide() {
        $(".months").css({
                    left: function( index, value ) {
                        return parseFloat( value ) - 240;
                    }
                });
                $('.month2').addClass('month1');
                $('.month2').removeClass('month2');
                $('.month3').addClass('month2');
                $('.month3').removeClass('month3');
                $('.month4').addClass('month3');
                $('.month4').removeClass('month4');
                };

//]]>       
    </script>

查看this fiddle以查看问题的实时演示。

我同时在屏幕上看了3个月。他们从左到右得到了.month1 .month2 .month3类。当我点击.month3元素时，我希望.month2成为.month1，。month3成为.month2，.month4成为.month3等。

我想如果你点击最右边的月份，它会将它们全部向左移动一个空格。

第一次点击时效果很好。在第二次单击时，您还可以单击中间月份，它仍然会触发动画。在第二次点击之后，任何以下点击都会完全混乱。

当你尝试点击May时，它不会触发动画，即使我检查它有类的元素.month3

似乎新应用的类不是Jquery正确定位的。我在这里缺少什么？

Answer 1

事件处理程序仅绑定到当前选定的元素;它们必须存在于您的代码进行事件绑定调用时的页面上。

委托事件的优势在于它们可以处理来自稍后添加到文档的后代元素的事件。

正在操纵事件选择器。

您需要使用Event Delegation。您必须使用委托事件方法来使用.on()。

使用

$(document).on('click', '.month3', slide);

Fiddle DEMO

使用jQuery添加的类不能用jQuery定位？

1 个答案: