0

You'll understand my problem after seeing my jsfiddle ;) : http://jsfiddle.net/N_3G/L47h985u/

Everything runs fine except that if you click on an active thumb, the fadeOut/fadeIn process is launched :( !...

I just want to complete this feature by saying "If the current thumb is active, when you click on it, do nothing..."

I'm beginner in jQuery and I'm trying to do my best.

Thanks for reading. Nicolas.

<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>

And the 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');
    }
});
});

A bit of 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%;
}
Eda
  • 218
  • 1
  • 3
  • 17
N3G
  • 1

3 Answers3

0

You should use hasClass

if ( !$(this).hasClass('.active') ) {
    //not active
}
tymeJV
  • 103,943
  • 14
  • 161
  • 157
0

jQuery not is not a logical not it is used to exclude selected element or select not matching elements

if you are only going to check with a class you can use hasClass but if you need to check condition by selector (as you know does not have to be class name can :first, #id etc) you can use .is("your selector")

check the codes below and see the differences,

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

}

OR 

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

}

OR

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

}
Onur Topal
  • 3,042
  • 1
  • 24
  • 41
0

Thanks ! That's it, now it works like I wanted by the combination of both of your answer :

$('.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');
        }
    });
});
N3G
  • 1