Question

在看到我的jsfiddle之后你会理解我的问题;）：http://jsfiddle.net/N_3G/L47h985u/

一切都运行良好，除非你点击一个活跃的拇指，fadeOut / fadeIn进程启动:(！...

我只是想通过说“如果当前拇指处于活动状态，当您点击它时，什么也不做......”来完成此功能。

我是jQuery的初学者，我正努力做到最好。

感谢阅读。尼古拉斯。

<div id="xmas-slides-wrapper">
<div id="xmas-slide">
    <div id="slide1-ban" class="slides">
        <img src="http://lorempixel.com/550/200/sports/1" />
    </div>
    <div id="slide2-ban" class="slides active">
        <img src="http://lorempixel.com/550/200/sports/2" />
    </div>
    <div id="slide3-ban" class="slides">
        <img src="http://lorempixel.com/550/200/sports/3" />
    </div>
    <div id="slide4-ban" class="slides">
        <img src="http://lorempixel.com/550/200/sports/4" />
    </div>    
</div>    
<div id="thumb-select">
    <div class="thumb" id="slide1">
        <img src="http://lorempixel.com/100/100/sports/1" />
    </div>
    <div class="thumb active" id="slide2">
        <img src="http://lorempixel.com/100/100/sports/2" />
    </div>
    <div class="thumb" id="slide3">
        <img src="http://lorempixel.com/100/100/sports/3" />
    </div>
    <div class="thumb" id="slide4">
        <img src="http://lorempixel.com/100/100/sports/4" />
    </div>    
</div>
</div>

和JS：

$('.slides.active').show();

$('.thumb').each(function() {
$(this).click(function() {
    if ($(this).not('.active')) {
        $('.thumb.active').removeClass('active');
        $(this).addClass('active');        
        var thumbActif = $(this).attr('id');
        $('.slides.active').fadeOut('slow');        
        $('.slides.active').removeClass('active');
        $('#' + thumbActif + '-ban').addClass('active');
        $('.slides.active').fadeIn('slow');
    }
});
});

一点CSS：

#xmas-slides-wrapper {
position:relative;
height:250px;
width:550px;
text-align:center;
}

#xmas-slide {
margin-bottom:20px;
height:200px;
width:550px;
overflow:hidden;
position:relative;
}

#xmas-slide .slides {
display:none;
position:absolute;
top:0;
left:0;
}

#thumb-select .thumb {
display:inline-block;
margin:0 10px;
}

#thumb-select {
position:absolute;
bottom:0;
left:0;
text-align:center;
width:100%;
}

Answer 1

您应该使用hasClass

if ( !$(this).hasClass('.active') ) {
    //not active
}

Answer 2

jQuery not不合逻辑，不会用于排除所选元素或选择不匹配的元素

如果您只是要查看课程，可以使用hasClass，但如果您需要通过选择器检查条件（因为您知道不必是类名，可以：首先，＃id等）你可以使用.is("your selector")

检查以下代码并查看差异，

if ($(this).hasClass('active') ) {

}

OR

if ($(this).is('.active') ) {

}

OR

if ($(this).is('.active:first') ) {

}

Answer 3

谢谢！这就是它，现在它的结果就像我想要的那样：

$('.slides.active').show();

$('.thumb').each(function() {
    $(this).click(function() {
        if (!$(this).hasClass('active')) {
            $('.thumb.active').removeClass('active');
            $(this).addClass('active');        
            var thumbActif = $(this).attr('id');
            $('.slides.active').fadeOut('slow');        
            $('.slides.active').removeClass('active');
            $('#' + thumbActif + '-ban').addClass('active');
            $('.slides.active').fadeIn('slow');
        }
    });
});

fadeOut / fadeIn显示，但如果你已经活跃，什么都不做

3 个答案: