javascript - Can't change css class using jquery

admin管理员组
文章数量:1022695

I have the following HTML page:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Settings</title>
    <link rel="stylesheet" href="css/mon.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=".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?

I have the following HTML page:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Settings</title>
    <link rel="stylesheet" href="css/mon.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./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?

Share Improve this question asked May 27, 2011 at 10:47 VansFannel 46.1k118 gold badges378 silver badges653 bronze badges

ur css declaration is wrong what means by .shiny-btn.clicked { – xkeshav Commented May 27, 2011 at 10:49
Have you tried addClass("shiny-btn").addClass("clicked") ? – Tomasz Kowalczyk 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 Commented May 27, 2011 at 10:50
@Decad: I'm getting a 'spanish'. – VansFannel Commented May 27, 2011 at 10:51
don't you just want to add class clicked but not remove shiny-btn? – nonopolarity Commented May 27, 2011 at 10:51

| Show 2 more ments

4 Answers 4

Sorted by: Reset to default 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.

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

.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");

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.

I have the following HTML page:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Settings</title>
    <link rel="stylesheet" href="css/mon.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=".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?

I have the following HTML page:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Settings</title>
    <link rel="stylesheet" href="css/mon.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./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?

Share Improve this question asked May 27, 2011 at 10:47 VansFannel 46.1k118 gold badges378 silver badges653 bronze badges

ur css declaration is wrong what means by .shiny-btn.clicked { – xkeshav Commented May 27, 2011 at 10:49
Have you tried addClass("shiny-btn").addClass("clicked") ? – Tomasz Kowalczyk 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 Commented May 27, 2011 at 10:50
@Decad: I'm getting a 'spanish'. – VansFannel Commented May 27, 2011 at 10:51
don't you just want to add class clicked but not remove shiny-btn? – nonopolarity Commented May 27, 2011 at 10:51

| Show 2 more ments

4 Answers 4

Sorted by: Reset to default 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.

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

.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");

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.

本文标签： javascriptCan39t change css class using jqueryStack Overflow

版权声明：本文标题：javascript - Can't change css class using jquery - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://it.en369.cn/questions/1745503510a2153500.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

369IT编程

javascript - Can't change css class using jquery - Stack Overflow

4 Answers 4

4 Answers 4

更多相关文章