jQuery: Having trouble with not and multiple selectors for CSS

Question

I've got a number of divs (CSS class 'group'), and when one is clicked in, the others are hidden and the clicked on one is expanded (gaining the 'detailed' CSS class). Then, when the expanded div ('.group .detailed) is clicked on, it should resize and lose the 'detailed' class. My problem is, I can't get click events on 'group' divs that also contain 'detailed' to be ignored by my first jquery function and activate my second jquery function. Here's my code:

$('.group:not(.detailed)').mousedown(function(){
    var $self = $(this);
    var speed = 3250;
    var offset = {x : $self.offset().left, y : $self.offset().top};

    readyAnimation();

    $('.group').not($self).addClass('hide');
    $self.animate({'width' : '100%', 'height' : '+=' + '300px'}, {left: 'offset.x' + 'px', top: 'offset.y' + 'px'}, speed);

    function readyAnimation () {
        $self.css({display : 'block'});
        $self.css({'-webkit-box-sizing' : 'border-box', '-moz-box-sizing' : 'border-box', 'box-sizing' : 'border-box'});
        $self.css({margin : '0px'});
    };

    $self.addClass('detailed');
});


$('.group.detailed').mousedown(function(){
    var $self = $(this);
    var size = '300px';
    var speed = 3250;

    console.log("it worked");

    resetAnimation();

    $self.animate({'width' : size, 'height' : size}, speed)
    $('.group').removeClass('hide');

    function resetAnimation () {
        $self.css({display : ''}); //Empty quotes resets the CSS value to what it was originally (in the CSS file)
        $self.css({'-webkit-box-sizing' : '', '-moz-box-sizing' : '', 'box-sizing' : ''});
        $self.css({margin : ''});
    };

    $self.removeClass('detailed');
});

I don't think I need to post my HTML and CSS for this, but they can be seen here in a previous question I asked. Thanks for reading.

EDIT: Here's a link to the fiddle

EDIT 2: See vahapwns, Jonathan and giordanolima's answers for working demonstrations of the code. By combining the two functions togother and using an if statement checking for 'detailed', problems arising from the first function overriding the second are solved. Thanks everybody for your input.

The problem is not the first function overriding the second, its that when the code is run there is no ".group.detailed" so the second mousedown event is never attached to any elements. — vahanpwns, Jan 24 '14 at 12:35

vahanpwns · Accepted Answer · 2014-01-24T11:03:53.237

3

take your two jQuery selections and merge them into one, use an if() to check if it's .detailed or not. you should also move those extra functions outside so that they're only defined once each.

i have rearranged the logic for you, now you need to fine tune the animation sequence: http://jsfiddle.net/V93dq/2/

edited Jan 24 '14 at 11:03

answered Jan 24 '14 at 10:48

vahanpwns

939
5
12

Thanks vahapwns, I merged them into one and it's working now. – Ber Jan 24 '14 at 10:59

score 2 · Answer 2 · answered Jan 24 '14 at 10:54

2

@vahanpwns is correct, try this one:

http://jsfiddle.net/V93dq/1/

Basically you can use the hasClass jQuery method.

$('.group').mousedown(function(){
    var $self = $(this);

    if($self.hasClass("detailed")){

    }else{

    }
});

answered Jan 24 '14 at 10:54

Jonathan

738
8
22

Thanks Jonathan, that's pretty similar to what I did after reading vahapwns answer. – Ber Jan 24 '14 at 10:58
This is exactly what OP needs, although I used `.is()` instead of `.hasClass()`, you got there before me :D – vahanpwns Jan 24 '14 at 11:11

score 1 · Answer 3 · answered Jan 24 '14 at 10:57

Take a look here... I used the condition hassClass... I think was better... And i prevent the link Default...

Finddle

function readyAnimation (mySelf) {
    mySelf.css({display : 'block'});
    mySelf.css({'-webkit-box-sizing' : 'border-box', '-moz-box-sizing' : 'border-box', 'box-sizing' : 'border-box'});
    mySelf.css({margin : '0px'});
};

function resetAnimation (mySelf) {
    mySelf.css({display : ''}); 
    mySelf.css({'-webkit-box-sizing' : '', '-moz-box-sizing' : '', 'box-sizing' : ''});
    mySelf.css({margin : ''});
};

$('.group').mousedown(function(){
    if(!$(this).hasClass("detailed")){
        var $self = $(this);
        var speed = 3250;
        var offset = {x : $self.offset().left, y : $self.offset().top};
        readyAnimation($self);
        $('.group').not($self).addClass('hide');
        $self.animate({'width' : '100%', 'height' : '+=' + '300px'}, {left: 'offset.x' + 'px', top: 'offset.y' + 'px'}, speed);
        $self.addClass('detailed');
    }else{
        var $self = $(this);
        var size = '300px';
        var speed = 3250;
        resetAnimation($self);
        $self.animate({'width' : size, 'height' : size}, speed)
        $('.group').removeClass('hide');
        $self.removeClass('detailed');
    }

}).find('a').click(function(e){e.preventDefault();});;

jQuery: Having trouble with not and multiple selectors for CSS

3 Answers3