放在哪裏住（），使這個jQuery的淡入淡出的工作

Question

我有一個工作大部分

但它似乎我需要使用活（）函數，因爲類「活動」這個jQuery淡入淡出是通過代碼添加到列表項元素。

我不知道在哪裏把live（）函數放在我的代碼中，所以這個工作。

繼承人我的jquery：

$('.photo-thumbs ul li a').click(function(e) { 

    e.preventDefault(); 

    var next = $(this).parent('li').index(); 

    $('.photo-main ul .active').fadeOut(1000).removeClass('.active'); 
    $('.photo-main ul li:eq('+next+')').fadeIn(1000).addClass('.active'); 

}); 

繼承人我的html：

<div class="photo-main"> 

     <ul> 
     <li style="background-image: url(images/dummy1-l.jpg);"></li> 
     <li class="active" style="background-image: url(images/dummy2-l.jpg);"></li> 
     <li style="background-image: url(images/dummy3-l.jpg);"></li> 
     <li style="background-image: url(images/dummy4-l.jpg);"></li> 
     <li style="background-image: url(images/dummy5-l.jpg);"></li> 
     </ul> 

    </div> 

    <div class="photo-thumbs"> 

     <ul> 
     <li><a href="#" style="background-image: url(images/dummy1-s.jpg);"></a></li> 
     <li><a href="#" style="background-image: url(images/dummy2-s.jpg);"></a></li> 
     <li><a href="#" style="background-image: url(images/dummy3-s.jpg);"></a></li> 
     <li><a href="#" style="background-image: url(images/dummy4-s.jpg);"></a></li> 
     <li style="margin-right: 0px;"><a href="#" style="background-image: url(images/dummy5-s.jpg);"></a></li> 
     </ul> 

     <div style="clear: both;"></div> 

    </div> 

繼承人我CSS：

.listing-page .left .photo-main { 
    width: 630px; 
    height: 350px; 
    margin-bottom: 10px; 
    position: relative; 
} 
.listing-page .left .photo-main li { 
    width: 630px; 
    height: 350px; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    z-index: 1; 
    background-repeat: no-repeat; 
    background-position: center center; 
    display: none; 
} 
.listing-page .left .photo-main .active { 
    z-index: 2; 
    display: block; 
} 
.listing-page .left .photo-thumbs li { 
    margin-right: 10px; 
    float: left; 
} 
.listing-page .left .photo-thumbs li a { 
    display: block; 
    width: 118px; 
    height: 118px; 
    -webkit-opacity: 0.75; 
    background-repeat: no-repeat; 
    background-position: center center; 
} 
.listing-page .left .photo-thumbs li a:hover { 
    -webkit-opacity: 1.0; 
} 

似乎一半的時間老李並沒有淡出，有時會切換到錯誤的LI。

Answer 1

無需live。你只是在類名的前面使用額外.：

$('.photo-main ul .active').fadeOut(1000).removeClass('.active'); 
                ^
$('.photo-main ul li:eq('+next+')').fadeIn(1000).addClass('.active'); 
                 ^

擺脫. S和你的代碼應該只是罰款。

Answer 2

這不是很容易告訴你在這裏試圖解決什麼問題，但.live() is不需要這個代碼中的活動類，因爲你沒有運行提前涉及.active的選擇器查詢 - 你只能運行他們當你需要他們。在這裏提前運行的唯一選擇器是指派點擊處理程序並且不指定.active類的選擇器。

如果您需要更具體的幫助，您必須澄清問題所在。

此外，不再推薦.live()。應該使用.on()（v1.7 +）或.delegate()（在v1.7之前）。

基於澄清你的問題，我想你只需要去除addClass()和removeClass()，使代碼看起來像這樣在類名的前面的時期：

$('.photo-thumbs ul li a').click(function(e) { 

    e.preventDefault(); 

    var next = $(this).parent('li').index(); 

    $('.photo-main ul .active').fadeOut(1000).removeClass('active'); 
    $('.photo-main ul li:eq('+next+')').fadeIn(1000).addClass('active'); 

});