大家好，我是 jQuery 的新手，自己制作东西时遇到了很多麻烦。我正在尝试将样式更改为 css 类 .change，但它不起作用。真的需要一些帮助。提前致谢。
$(document).ready(function() {
$('#button').click(function() {
$(this).addClass('change');
})
})html body {
margin:0;
padding:0;
background-color:#3366CC;
}
.main .container {
margin-top:0;
text-align:center;
padding:5%;
}
.main h1 {
color:white;
font-size:100px;
text-transform:uppercase;
}
.main h3 {
color:white;
font-size:50px;
}
.main #button {
color:white;
background-color:red;
padding:.5%;
text-align:center;
width:10%;
font-size:25px;
margin:auto;
}
.change {
background-color:black;
} <DOCTYPE!html>
<html>
<head>
<title>Community-Help yours today</title>
<link rel='stylesheet' type='text/css' href='community.css'/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type='text/javascript' src='community.js'></script>
</head>
<body>
<div class="main">
<div class="container">
<h1>Community</h1>
<h3>Start an initiative, gain support, build your project</h3>
<div id="button">Get Started</div>
</div>
</div>
</body>
</html>最佳答案
你最好这样做:
.button {
color:white;
background-color:red;
padding:.5%;
text-align:center;
width:10%;
font-size:25px;
margin:auto;
}
.button--changed {
background-color:black;
}
直接将 css 的类添加到按钮。
然后切换 .button-changed 类。这可以降低您的特异性，并且您不会在以后遇到类似的问题。
通过添加更多的特异性，例如通过执行 .main #button.changed，您只是将相同的问题推迟到下线。想象一下，如果您出于某种原因需要添加第二个更改状态？
此外，您现在不必在 main 中包含 .button 即可使用它的样式，通过使用类，您可以有效地重新使用页面上的按钮，但是这些是奖励积分。
这里有一些引用可以进一步说明...
http://www.impressivewebs.com/css-specificity-irrelevant/
http://csswizardry.com/2011/09/when-using-ids-can-be-a-pain-in-the-class/
关于javascript - 坚持将 css 类添加/切换到 jquery 中的 html 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32859444/