CODEWITHSUNDEEP
javascriptjquerycsshtml
Liam
Liam

Reputation: 9855

If element has class then run function, else run another

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

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

Upvotes: 0

Views: 11763

Answers (3)

Ryan Smith
Ryan Smith

Reputation: 1335

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);
            }
        }
    });
});

Upvotes: 1

adeneo
adeneo

Reputation: 318182

This selector :

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

needs to be :

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

notice the quotes !

Upvotes: 1

Robert Fricke
Robert Fricke

Reputation: 3643

With jQuery:

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

Edit: it returns true or false: jQuery hasClass Documentation

Upvotes: 0

Related Questions