Can't change css class using jquery

Question

I have the following HTML page:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Settings</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/settings.css">
    <link rel="stylesheet" href="css/buttons.css">
    <script src="scripts/utils.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var language = localStorage.getItem("idioma");
            $(language).removeClass("shiny-btn").addClass("shiny-btn clicked");
       });
    </script>
</head>

<body>
    <div id="settingsPanel">Settings</div>
    <a id="spanish" class="shiny-btn" onclick="setLanguage('spanish');">Spanish</a>
    <a id="catalan" class="shiny-btn" onclick="setLanguage('catalan');">Catalan</a>
</body>

</html>

And this is buttons.css file:

.shiny-btn {
    cursor: pointer;
    text-align:center;
    width: 15em;
    padding: .5em;
    color: #ffffff;
    text-shadow: 1px 1px 1px #000;
    border: solid thin #882d13;
    -webkit-border-radius: .7em;
    -moz-border-radius: .7em;
    border-radius: .7em;
    -webkit-box-shadow: 2px 2px 3px #999; 
    box-shadow: 2px 2px 2px #bbb;
    background-color: #ce401c;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#e9ede8), to(#ce401c),color-stop(0.4, #8c1b0b));
}

.shiny-btn.clicked {
    background-color:gray;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7) inset;
}

I'm sure I have a value in var language.

But when I do this: $(language).removeClass("shiny-btn").addClass("shiny-btn clicked"); nothing changes.

Do you know why?

ur css declaration is wrong what means by .shiny-btn.clicked { — xkeshav
– xkeshav, Commented May 27, 2011 at 10:49
console.log(language) - after you have defined it to see if it is really set to what you think it is. — Declan Cook
– Declan Cook, Commented May 27, 2011 at 10:50
don't you just want to add class clicked but not remove shiny-btn? — nonopolarity
– nonopolarity, Commented May 27, 2011 at 10:51

xkeshav · Accepted Answer · 2011-05-27 11:06:38Z

4

first u change in CSS ( not necessary )

.clicked {
    background-color:gray;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7) inset;
}

then try with this

$('a').live ('click hover mouseover', function() {
    var lang = $(this).id;
    $('#'+lang).addClass("clicked");
 },
   function() {  
    $(this).removeClass("clicked");
});

see here clearly mentioned:

It's important to note that this method does not replace a class. It simply adds the class, appending it to any which may already be assigned to the elements.

edited May 27, 2011 at 11:06

answered May 27, 2011 at 10:52

xkeshav

54.2k47 gold badges183 silver badges255 bronze badges

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

5 Comments

rciq Over a year ago

His CSS is perfectly fine. Read up: w3.org/TR/css3-selectors/#class-html. This part especially: 'The following rule matches any P element whose class attribute has been assigned a list of whitespace-separated values that includes both pastoral and marine: p.pastoral.marine { color: green }'

tvanfosson Over a year ago

No need to change the CSS if the OP wants the style to apply only to shiny-btns that are also clicked. Perhaps there are other types of clicked buttons that should be styled differently.

VansFannel Over a year ago

The correct answer is change my code with this line: $('#'+lang).addClass("clicked");. Thank you very much.

xkeshav Over a year ago

@rciq i agree with u, but then how will he add that class via jQuery; that method is useful with DOM loaded

rciq Over a year ago

@diEcho: He will add it just normally by .addClass("clicked") and that's it. No CSS changes needed.

kaz · Accepted Answer · 2011-05-27 10:53:00Z

2

use just $(language).addClass("clicked")

answered May 27, 2011 at 10:53

kaz

1,9431 gold badge13 silver badges19 bronze badges

Comments

balexandre · Accepted Answer · 2011-05-27 10:54:59Z

1

.shiny-btn.clicked { ... }

this represents 2 classes, shiny-btn and clicked so, you will need to have

<html_element class="shiny-btn">
    <html_element class="clicked"> ... </html_element>
</html_element>

what you probably want is to inherit all the previous class and override with the class clicked

.shiny-btn {        
    /* default properties */
}

.clicked {
    background-color:gray;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7) inset;
}

.selected {
    /* add here your selected style */
 }

and then, just use:

// make a fancy hover on buttons
$(".shiny-btn").hover( 
    function() {  // on mouseover
        $(this).addClass("clicked");
    }, 
    function() {  // on mouseout
        $(this).removeClass("clicked");
    });

// add .selected class to the correct language
$("#" + language).addClass("selected");

answered May 27, 2011 at 10:54

balexandre

75.4k47 gold badges240 silver badges352 bronze badges

1 Comment

rciq Over a year ago

This CSS: '.classA.classB {}' will match '<div class="classA classB"/>'. Read up: Read up: w3.org/TR/css3-selectors/#class-html. This part especially: 'The following rule matches any P element whose class attribute has been assigned a list of whitespace-separated values that includes both pastoral and marine: p.pastoral.marine { color: green }

rciq · Accepted Answer · 2011-05-27 11:44:07Z

1

As far as I understand you only need to add the 'clicked' class. jQuery should handle it well:

$("#"+language).addClass("clicked");

Edit: As diEcho pointed out, language is apparently a string. So an ID selector is required.

edited May 27, 2011 at 11:44

answered May 27, 2011 at 10:59

rciq

1,31010 silver badges10 bronze badges

4 Comments

xkeshav Over a year ago

your are wrong still. language only contain id name you must be add $('#'+language). btw when there are already multiple answer then why u copy them ?? is that different from others??

rciq Over a year ago

Firstly, the author didn't specify what the var language contains exactly. From his code I assumed it's already a html element or a jQuery. Secondly, I didn't copy your answer because it's incorrect and at the time I was posting I could not see any others.

xkeshav Over a year ago

now u can see; so what abt deleting ur answer coz it's still incorrect

rciq Over a year ago

Edit: you are right. I missed a line in his code. I will edit the answer now:)

Collectives™ on Stack Overflow

Can't change css class using jquery

4 Answers 4

5 Comments

Comments

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related