I have an element on my page that I want to make draggable.

On the click event I add the class 'active' this just expands my div and the image inside it.

So initially my div looks like...

<div class="work-showcase">

on click it bees...

<div class="work-showcase active">

I want to say if the div has class active, perform X function, else perform Y.

$(body).click(function(){

        if($('.work-showcase').hasClass('active')){

            var bleft = 4900 ;
            var bright = $(window).width() - 200;

            $('.active > ul li').draggable({
                 axis: "x", 
                 revert: false,
                 stop: function(event, ui) {
                    if(ui.position.left < -bleft)
                    {   
                    $(this).animate({"left": "0px"}, 600);
                    }
                    if(ui.position.left > bright)
                    {   
                    $(this).animate({"left": "0px"}, 600);
                    }

                }
            });


            } else {


     var sleft = 1846 ;
     var sright = $(window).width() - 200;

            $('.work-showcase > ul li').draggable({
                 axis: "x", 
                 revert: false,
                 stop: function(event, ui) {
                    if(ui.position.left < -sleft)
                    {   
                    $(this).animate({"left": "0px"}, 600);
                    }
                    if(ui.position.left > sright)
                    {   
                    $(this).animate({"left": "0px"}, 600);
                    }

                }
            });

        }

    });

My If statement doesnt seem to work...

I have an element on my page that I want to make draggable.

On the click event I add the class 'active' this just expands my div and the image inside it.

So initially my div looks like...

<div class="work-showcase">

on click it bees...

<div class="work-showcase active">

I want to say if the div has class active, perform X function, else perform Y.

$(body).click(function(){

        if($('.work-showcase').hasClass('active')){

            var bleft = 4900 ;
            var bright = $(window).width() - 200;

            $('.active > ul li').draggable({
                 axis: "x", 
                 revert: false,
                 stop: function(event, ui) {
                    if(ui.position.left < -bleft)
                    {   
                    $(this).animate({"left": "0px"}, 600);
                    }
                    if(ui.position.left > bright)
                    {   
                    $(this).animate({"left": "0px"}, 600);
                    }

                }
            });


            } else {


     var sleft = 1846 ;
     var sright = $(window).width() - 200;

            $('.work-showcase > ul li').draggable({
                 axis: "x", 
                 revert: false,
                 stop: function(event, ui) {
                    if(ui.position.left < -sleft)
                    {   
                    $(this).animate({"left": "0px"}, 600);
                    }
                    if(ui.position.left > sright)
                    {   
                    $(this).animate({"left": "0px"}, 600);
                    }

                }
            });

        }

    });

My If statement doesnt seem to work...

• javascript
• jquery
• css
• html

• 1 jQuery: hasClass('classNameToCheck'), native: elem.className.indexOf('classNameToCheck') !== -1 – marekful Commented Jan 25, 2013 at 16:09
• My if statement doesn't seem to work... – Liam Commented Jan 25, 2013 at 16:11
• How it does not work? What should happen and what happens instead? condition in if statement is Ok. Never seen a problem with hasClass – Viktor S. Commented Jan 25, 2013 at 16:16
• It should do exactly the same, but more as a sidenote you could try : if( $('.work-showcase').is('.active') ) { ... } – adeneo Commented Jan 25, 2013 at 16:26

3 Answers 3

Try this instead of what you currently have (let me know if there is a problem)

$('body').click(function () {
    var drag, left, right;

    if ($('.work-showcase').hasClass('active') === true) {
        drag = '.active > ul li';
        left = -4900;
        right = $(window).width() - 200;
    } else {
        drag = '.work-showcase > ul li';
        left = -1846;
        right = $(window).width() - 200;
    }

    $(drag).draggable({
        axis: 'x',
        revert: false,
        stop: function (event, ui) {
            if (ui.position.left < left) {
                $(this).animate({'left': '0px'}, 600);
            } else if (ui.position.left > right) {
                $(this).animate({'left': '0px'}, 600);
            }
        }
    });
});

This selector :

$(body).click(function(){ ... });

needs to be :

$('body').click(function(){ ... }

notice the quotes !

With jQuery:

if($(this).hasClass("active")){
    //do this
} else {
    //do that
}

Edit: it returns true or false: jQuery hasClass Documentation