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（）选择器过滤器更可读的选择。在大多数情况下，这是一个更好的选择。

显然，这是使用not选择器的首选和推荐方式。 Check out my jsFiddle demonstrating

此外，如果你的第一个if，你似乎错过了一个分号。

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

        // ...

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

jQuery：没有选择器不能正常工作......或者我是否误导它？

1 个答案: