jQuery: не селектор не работает должным образом ... или я ошибаюсь?

Question

У меня есть прослушиватель событий, который выполняет fadeIn и fadeOut на некоторых изображениях, когда пользователь нажимает li.Кроме того, я запускаю первый щелчок по загрузке, чтобы заставить некоторые динамические вещи происходить (всплывающее окно добавляется).

Теперь при загрузке мне нужны динамические вещи, исключая эффект fadeIn/fadeOut, а также пользовательский щелчокli, анимация должна работать.для этого я добавил класс и поставил :not, чтобы он игнорировал изображения, не имеющие класса .active .(Я добавил класс как активный).как только динамический вызов вызван, я удаляю этот класс.Итак, в следующий раз, когда пользователь нажмет, все будет работать как обычно.

Но селектор :not не работает.Я получаю fadeIn/fadeOut эффект при загрузке ... Как мне избежать этого?

мой код:

if ($('div').hasClass('selsect-an-outfit')){
    $('div.selsect-an-outfit li').click(function(){
        var getUrl = $(this).children().find('img').attr('src').replace('thumb','photo');
        $('#outfit-box > img:not(.active)').fadeTo(200,0.5).fadeTo(400,1).attr('src', getUrl);
        $('<span class="layer">YOU&rsquo;RE LOOKING AT ME ALREADY <em>pick another</em></span>').appendTo($(this));
        $(this).siblings().find('span.layer').remove();
        $('#outfit-box > img').removeClass('active');
        return false;
    })
}

$('div.selsect-an-outfit li:first-child').click();

это мой HTML

<div class="selsect-an-outfit">
    <ul>
        <li><a href="#"><img src="imgs/thumb/feature-photo1.jpg"></a></li>
        <li><a href="#"><img src="imgs/thumb/feature-photo2.jpg"></a></li>
        <li><a href="#"><img src="imgs/thumb/feature-photo3.jpg"></a></li>
        <li><a href="#"><img src="imgs/thumb/feature-photo4.jpg"></a></li>
        <li><a href="#"><img src="imgs/thumb/feature-photo5.jpg"></a></li>
        <li><a href="#"><img src="imgs/thumb/feature-photo6.jpg"></a></li>
        <li><a href="#"><img src="imgs/thumb/feature-photo7.jpg"></a></li>
    </ul>
</div>

<div id="outfit-box">
    <img class='active' src='imgs/photo/feature-photo1.jpg' width='473' 
        height='711' alt='feature-photo'>
    <div id='outfit-top-layer'>
        <h2>special occasion</h2>
    </div>

    <p class="globe-trotting-info">
        You may not know us yet, but we’ve been selling fun, colourful 
        clothes for the whole family for almost twenty years. To help us 
        get acquainted we’ve 
    </p>

    <span><!-- swipe arrow --></span>
</div>

Кто-нибудь может мне помочь?

Answer 1

Попробуйте изменить его на:

$('#outfit-box > img')
    .not('.active')
    .fadeTo(200, 0.5)
    .fadeTo(400, 1)
    .attr('src', getUrl);

В итоге метод .not () предоставит вам более читаемые выборки, чем вставка сложных селекторов или переменных в фильтр селекторов: not ().В большинстве случаев это лучший выбор.

Очевидно, это предпочтительный и рекомендуемый способ использования неселектора. Проверьте мой jsFiddle, демонстрирующий .

Кроме того, похоже, что в конце вы пропустили точку с запятой, если ваш первый if.

if ($('div').hasClass('selsect-an-outfit')) {
    $('div.selsect-an-outfit li').click(function() {

        // ...

        return false;
    }); // <-- Right there
}