无法使用 jquery 更改 css class
[英]Can't change css class using jquery
问题描述
I have the following HTML page:
我有以下 HTML 页面：
<!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:这是buttons.css文件：
.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 .我确定我在var language中具有价值。
But when I do this: $(language).removeClass("shiny-btn").addClass("shiny-btn clicked");但是当我这样做时： $(language).removeClass("shiny-btn").addClass("shiny-btn clicked"); nothing changes.没有什么变化。
Do you know why?你知道为什么吗？
4 个解决方案
解决方案1
3 已采纳 2011-05-27 10:52:19
first u change in CSS ( not necessary )首先你改变CSS （不是必需的）
.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.
解决方案2
2 2011-05-27 10:53:00
use just $(language).addClass("clicked")只使用 $(language).addClass("clicked")
解决方案3
1 2011-05-27 10:54:59
.shiny-btn.clicked { ... }
this represents 2 classes, shiny-btn and clicked so, you will need to have这代表 2 个类， shiny-btn并clicked ，因此您需要
<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您可能想要的是继承所有以前的 class 并用clicked的 class 覆盖
.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");
解决方案4
1 2011-05-27 10:59:47
As far as I understand you only need to add the 'clicked' class.据我了解，您只需要添加“点击”的 class。 jQuery should handle it well: jQuery 应该处理得很好：
$("#"+language).addClass("clicked");
Edit: As diEcho pointed out, language is apparently a string.编辑：正如 diEcho 指出的那样，语言显然是一个字符串。 So an ID selector is required.所以需要一个 ID 选择器。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.