где поставить live (), чтобы этот jquery crossfade работал - PullRequest
Новая
       12

где поставить live (), чтобы этот jquery crossfade работал

0 голосов
/ 27 декабря 2011

У меня есть это jquery crossfade, которое работает по большей части

, за исключением того, что мне кажется, что мне нужно использовать функцию live (), так как класс "active" добавляется в элемент элемента списка через код.

я не уверен, куда поместить функцию 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.

Ответы [ 2 ]

2 голосов
/ 27 декабря 2011

Нет необходимости в live.Вы просто используете дополнительный . перед именем класса: 

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

Избавьтесь от . s, и ваш код должен работать нормально.

0 голосов
/ 27 декабря 2011

Нелегко сказать, какую проблему вы пытаетесь решить, но .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');

});
...