CODEWITHSUNDEEP
jquerycss
Bryan P
Bryan P

Reputation: 5051

Why class style isn't being applied to button

Any comment on why the CSS classes are not being applied to the buttons with the JQuery I have when they are pressed?

CSS

input[type=button] {
    width: 100px;
    &.is-pressed {
        border: 5px solid blue; }
    &.is-not-pressed {
        border: none; }
}

JQuery

$(":button").click(function () {
    $(this).addClass("input[type=button].is-pressed")
    .removeClass("input[type=button].is-not-pressed");

    $(':button').not(this).each(function(){
         $(this).addClass("input[type=button].is-not-pressed");
        });
});

JSFiddle

Upvotes: 0

Views: 124

Answers (2)

Adrian Enriquez
Adrian Enriquez

Reputation: 8413

Check this. You're not using the pre-compiled css. And if you add class in jQuery you don't have to add the . inside.

Fiddle

jQuery

Change this:

 $(this).addClass("input[type=button].is-pressed")
    .removeClass("input[type=button].is-not-pressed");

To this:

    $(this).addClass("is-pressed")
    .removeClass("is-not-pressed");

And compile your CSS to this.

input[type=button] {
    width: 100px;
}
input[type=button].is-pressed {
        border: 5px solid blue; 
}
input[type=button].is-not-pressed {
        border: none; 
}

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388406

Because your style sheet is not CSS, it looks like you have a LESS script, you need to parse it for the CSS styles to get applied.

Also your script is not proper, when you add a class only the class name need to be specified not all the selector that was specified in the css rule

$(":button").click(function () {
    $(this).addClass("is-pressed")
        .removeClass("is-not-pressed");

    $('.is-pressed:button').not(this).addClass("is-not-pressed").removeClass("is-pressed");
});

Demo: Fiddle

Upvotes: 3

Related Questions