Set a CSS Class jquery

Question

I have a page that can set email preferences.

Next to each email there is a "Yes/No" button (meaning is this person subscribed to this type of email).

If it is "Yes", the css class is set to bootstraps success class.

If it is "No", the css class is set to Boostrap's danger class.

I am trying to set it up so that when the user clicks this, it toggles the class and changes the html property of the button from "Yes" to "No" or vice-verse.

I use $(this).html("Yes"); and this works just fine.

However when changing the classes, I have a script that runs as:

$(this).removeClass("success");  
$(this).addClass("danger");

The problem is that when I use $(this).removeClass() and also $(this).addClass(), it doesn't change the element style. However, when I query the element it DOES remove the class and does add the class I want - the only problem is that the styling does not change.

The style DOES exist in the browser. If I load an element with class="danger" or an element with a class="success" it renders exactly how it should.

So something with this removeClass and addClass is not somehow triggering the STYLE to update.

What am I doing wrong?

Use browser developer tool (F12) and check whether CSS/styles files are properly embedded in the page. — Vijai
– Vijai, Commented Aug 22, 2016 at 23:53
If the class is being added/removed... the error is in the CSS, not jQuery. — Scott
– Scott, Commented Aug 22, 2016 at 23:56
Yeah, the jQuery is running fine. The style class does exist in the browser. When I load the page with SUCCESS or DANGER as the default class, both render fine. It is only when I change it with the $(this).addClass() or $(this).removeClass() — Walker Farrow
– Walker Farrow, Commented Aug 22, 2016 at 23:57
Then there are cascading issues and the danger/success classes are being overridden due to hierarchy in the CSS. — Scott
– Scott, Commented Aug 22, 2016 at 23:58
Use the Style sidebar to see what styles are being assigned to the element and which CSS rules they're coming from. Then you can make your selector more specific to override it. — Barmar
– Barmar, Commented Aug 23, 2016 at 0:10

Jhecht · Accepted Answer · 2016-08-23 01:49:26Z

1

The below works just fine for me,

however, without your exact HTML and Javascript, this is simply a guess

Let me know how it goes for you.

$(document).ready(function(){
  $('.email-button').on('click',function(){
      $(this).toggleClass('btn-danger btn-success');
      $(this).html($(this).hasClass('btn-success') ? 'Yes' : 'No');
    })
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button class="btn btn-danger email-button">No</button>

answered Aug 23, 2016 at 1:49

Jhecht

4,4352 gold badges31 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Walker Farrow Over a year ago

That worked perfect. In looking over docs, I cannot see why the toggleClass would work when the removeClass and the addClass dont do the same. The only thing I can think of is that the toggleClass maybe LOADS the classes and their styles when the page renders. And then just toggles between them.... I guess? If anybody can clarify that, that would be appreciated

Collectives™ on Stack Overflow

Set a CSS Class jquery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related