用jQuery添加的類不能用jQuery定位？

-3

我想爲平滑動畫的日曆製作月份切換器。我覺得我非常接近，但只是在這裏錯過了一些東西。用jQuery添加的類不能用jQuery定位？

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等。

我想要如果你點擊最右邊的月份，它將它們全部移到左側。

它在第一次點擊時完美運行。在第二次點擊時，你也可以點擊中間月份，它仍然會觸發動畫。第二次點擊後點擊任何完全混淆。

當您嘗試單擊月，它不會火的動畫，即使當我檢查的元素，它具有類.month3

它看起來好像新應用的類的arent jQuery的正確目標。我在這裏錯過了什麼？

來源

2014-02-06 Jeroen

郵政相關的代碼。僅供參考，你的問題來自你需要委託事件的事實，所以類選擇器是準確的 –

你可能想要[__DEMO__]（http://jsfiddle.net/satpalsingh/UzXuf/24/）學習[**事件委託** ]（http://learn.jquery.com/events/event-delegation/） – Satpal

@ A.Wolff更新了我的問題。 – Jeroen

事件處理程序僅綁定到當前選定的元素;它們必須在代碼進行事件綁定調用時存在於頁面上。

委託事件有優勢，他們可以處理來自被添加到該文件在稍後的時間後代元素的事件。

在操作事件選擇器時。

您需要使用Event Delegation。您必須使用委託事件方法使用.on()。問題

使用

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

Fiddle DEMO

來源

2014-02-06 18:32:41 Satpal

用jQuery添加的類不能用jQuery定位？

回答

相關問題