0

ほとんどの部分で機能しているこのjqueryクロスフェードがあります

クラス「アクティブ」がコードを介してリスト項目要素に追加されているため、 live() 関数を使用する必要があるようです。

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 は半分の時間でフェードアウトしないようで、間違った LI に切り替わることもあります。

4

2 に答える 2

2

の必要はありませんlive。.クラス名の前にエクストラを使用しているだけです：

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

sを取り除く.と、コードは問題なく動作するはずです。

于 2011-12-27T06:13:53.240 に答える
0

ここで解決しようとしている問題を特定するのは簡単で.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');

});
于 2011-12-27T06:04:31.870 に答える