ライブどこに置くか（）私は私がクラス「アクティブ」以来のライブ（）関数を使用する必要があるようだ除いて、ほとんどの部分</p> <p>のために働いて、このjqueryのクロスフェードを持って仕事

Question

このjqueryのクロスフェードがあることを確認しますコードを介してリストアイテム要素に追加されます。

これは私のコードでlive（）関数をどこに置くかわかりません。

HERESに私の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'); 

}); 

がHERESに私の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> 

がHERESに私の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がフェードアウトしないようです時には誤ったLIに切り替わることがあります。

Answer 1

必要はありません。あなただけのクラス名の前に余分な.を使用している：

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

. Sを取り除くと、あなたのコードはうまく動作するはずです。

Answer 2

あなたがここで解決しようとしている問題を特定するのは簡単ではありませんが、アクティブなクラスではこのコードでは.live() isは必要ありません。あなたがそれらを必要とするときにそれらを。事前に実行されている唯一のセレクターは、クリックハンドラーを割り当て、.activeクラスを指定していないセレクターです。

さらに詳しいヘルプが必要な場合は、問題の内容を明確にする必要があります。

また、.live()は推奨されません。 .on()（v1.7 +）または.delegate()（v1.7より前）を使用する必要があります。

あなたの質問の明確化に基づいて、私はあなただけので、コードは次のようになりますaddClass()とremoveClass()で、クラス名の前にピリオドを削除する必要があると思う：liveため

$('.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'); 

});