Question

我刚刚学会了如何使用JQuery创建按钮，使用户能够更改CSS属性。现在我尝试创建添加或删除CSS类的按钮，使用教程 http://www.w3schools.com/jquery/jquery_css_classes.asp

出于某种原因，它不起作用。这是我头部的代码：

<script>
 $(document).ready(function(){
 $("button#31").click(function(){
 $(".Page1").addClass("georgia nite");
 });
 });
</script>

<script>
 $(document).ready(function(){
 $("button#32").click(function(){
 $(".Page1").toggleClass("georgia nite");
 });
 });
</script>

<style>
 .georgia { font-family: Georgia; }
 .nite { background: #000; color: #fff; }
</style>

（Page是分配给div的类的名称......）

<div id="page-content-wrapper" class="Page1">

这是我身体部分的代码......

<button id="btn31">Add Class</button>
<button id="btn32">Toggle</button>

为了更好的衡量，我还将新样式（georgia和nite）复制到我的样式表中。但是当我点击＆＃34;添加课程＆＃34;或＆＃34;切换＆＃34;按钮，没有任何反应。谁能看到我做错了什么？

Answer 1

HTML和您的JS中的ID不匹配。

正确的ID选择器是#，后跟id属性的值，$("#btn32")为<button id="btn32">。

使用已更改的选择器从button#32编辑JS到#btn32：

$(document).ready(function(){
   $("#btn32").click(function() {
   $(".Page1").toggleClass("georgia nite");
 });

Answer 2

您确定可以添加多个以空格分隔的类吗？以下代码对我来说非常合适，但只有1个类：

$('#cl_wind').click(function() {
    $('#_error').addClass('hidden');
});

HTML部分：

<div id="_error">Some text</div>
<button id="cl_wind"></button>

UPD：正如@dersvenhesse所提到的，你元素的id和你在js differes中使用的id。元素id不能按字母/数字分割。这是一个单一的身份

JQuery添加/删除类不起作用

2 个答案: