javascript - jquery "hasClass()" not working? - Stack Overflow

admin管理员组

文章数量:1195140

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.

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.

• javascript
• jquery

Share Improve this question Follow asked Oct 26, 2012 at 19:58 XhynkXhynk 13.8k88 gold badges3434 silver badges7070 bronze badges 1

• you dod realize, in your example, hasclass is only called once. Its not an event, its not going to fire every time that element has that class. hasClass is a function intended to be used during an event to check if a specific element has a specific class – SpYk3HH Commented Oct 26, 2012 at 20:05

Add a comment  | 

6 Answers 6

Sorted by: Reset to default 5

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.

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.

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

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

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

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

本文标签： javascriptjquery quothasClass()quot not workingStack Overflow