CODEWITHSUNDEEP
javascriptjquery
Xhynk
Xhynk

Reputation: 13860

jquery "hasClass()" not working?

I need to hide a div if another div has a class.

I've created a very basic example HERE

I need the div on the bottom to hide when the word "click" is.. well.. clicked. It adds a class to the middle div just fine, but it seems hasClass() doesn't want to work?

NOTE: The structure needs to be like this. If "click" is clicked, modify the middle div (add class?), and manipulate the bottom div based on the middle div. With this setup - I can't just do "if CLICK is clicked, slideUp() the bottom div".

Also, once "ok" or "cancel" is clicked, it will revert, because the middle div will no longer have the class. Provided that's the method I can get working here, haha.

Upvotes: 7

Views: 50172

Answers (6)

Jack
Jack

Reputation: 3415

On a side note, another variation to check if there's a class is: 

if ( $('body.className').length ) {

Still recommend hasClass though. Just nice to see variation sometimes.

Upvotes: 5

Justin John
Justin John

Reputation: 9616

As mentioned by others, you don't have a call to if on all click event handlers. Create a custom function with statement inside if and call it on all click handler.

Check this fiddle

Upvotes: 2

wirey00
wirey00

Reputation: 33661

You can combine them all into one function - And you want that check to be inside the click functions

You can reduce the addclass removeclass by using toggleClass and passing in a condition

$('a.edit-timestamp,a.save-timestamp,a.cancel-timestamp').click(function() {
    var $tsdiv = $("#timestampdiv");
    // add class showpub if edit is clicked
    $tsdiv.toggleClass('showpub',$(this).hasClass('edit-timestamp'));
    // add class hidepub only if it wasn't edit that was clicked
    $tsdiv.toggleClass('hidepub',!$(this).hasClass('edit-timestamp'));  

    // then do your toggle                            
    if ($tsdiv.hasClass('hidepub')) {
        $('#major-publishing-actions').slideUp('slow');
    }else{
        $('#major-publishing-actions').slideDown('slow');
    }
});

http://jsfiddle.net/JPcge/

You can reverse it by swapping the logic passed into the toggleClass() methods

Upvotes: 0

Jim
Jim

Reputation: 1294

After you append the class to the DOM element, this should properly hide the element.

$('.element').click(function()
{
    $('.thisElement').addClass('hidepub');
    if($('.thisElement').hasClass('hidepub')) {
         $('.thisElement').hide();
    }
});

Upvotes: 1

EyalAr
EyalAr

Reputation: 3170

your if statement is outside of any function, so there is no reason for it to be called after the script is loaded.

See this fiddle, I think that's what you want.

Upvotes: 5

Mike Park
Mike Park

Reputation: 10941

This is only getting called once, when the script loads. You need to have make sure it gets called in your .click(...) handler.

if($('#timestampdiv').hasClass('hidepub')) {
    $('#major-publishing-actions').slideUp('slow');
}

Upvotes: 3

Related Questions