Javascript 初级JQuery切换类

我正在为一个项目工作。我快速尝试了[coding some buttons（）。我创建了两个状态。一个蓝色的选定类和一个略图显示的取消选定类。每次单击其中一个按钮时，我都想在这两个类之间切换

我在jQuery中尝试了很多方法，有些方法已经奏效了，比如更改

h1

文本颜色，但除此之外，对我来说似乎什么都不起作用

简言之，我正在寻找在每次单击时在两个按钮之间切换的最佳方式

提前谢谢你的帮助

h1{
字体系列：无衬线；
字体大小：16px；
字体重量：轻；
显示：内联；
}
#明星{
背景图像：url（“https://image.ibb.co/mdSJgT/Hollow_Star.png");
宽度：14px；
高度：14px；
显示：内联块；
}
#容器{
填充：8px 8px；
边框：实心1px；
显示：内联块；
}
#星选{
背景图像：url（“https://image.ibb.co/hZ2Uo8/Filled_Star.png");
宽度：14px；
高度：14px；
显示：内联块；
}
#集装箱选择{
填充：8px 8px；
显示：内联块；
背景：#006DEF；
}
#h1select{
字体系列：无衬线；
字体大小：16px；
字体重量：轻；
显示：内联；
颜色：白色；
}

链接
链接

首先使用类创建css

然后您可以使用：

$("#starselect").click(function() {
   $(this).removeClass('class2');
   $(this).addClass('class1');
});

附言： 1.您可以使用Jquery中的

attr（）

函数删除或添加ID。但这并不是建议的。因为ID定义的是一个元素，而不是它的样式

您还可以使用

toggleClass（）

---

首先使用类创建css

然后您可以使用：

$("#starselect").click(function() {
   $(this).removeClass('class2');
   $(this).addClass('class1');
});

附言： 1.您可以使用Jquery中的

attr（）

函数删除或添加ID。但这并不是建议的。因为ID定义的是一个元素，而不是它的样式

您还可以使用

toggleClass（）

---

将id转换为类并使用jQuery

$（“#按钮”）。在（“单击”，函数（）{
$（this）.children（）.toggleClass（“容器容器选择”）；
$（this.children（）.children（）.eq（0）.toggleClass（“星-星选择”）；
$（this.find（“h1”）.toggleClass（“h1select”）；
})；

h1{
字体系列：无衬线；
字体大小：16px；
字体重量：轻；
显示：内联；
}
.明星{
背景图像：url（“https://image.ibb.co/mdSJgT/Hollow_Star.png");
宽度：14px；
高度：14px；
显示：内联块；
}
.集装箱{
填充：8px 8px；
边框：实心1px；
显示：内联块；
}
.星选{
背景图像：url（“https://image.ibb.co/hZ2Uo8/Filled_Star.png");
宽度：14px；
高度：14px；
显示：内联块；
}
.集装箱选择{
填充：8px 8px；
显示：内联块；
背景：#006DEF；
}
.h1select{
字体系列：无衬线；
字体大小：16px；
字体重量：轻；
显示：内联；
颜色：白色；
}

链接

将id转换为类并使用jQuery。下面是一个示例

$（“#按钮”）。在（“单击”，函数（）{
$（this）.children（）.toggleClass（“容器容器选择”）；
$（this.children（）.children（）.eq（0）.toggleClass（“星-星选择”）；
$（this.find（“h1”）.toggleClass（“h1select”）；
})；

h1{
字体系列：无衬线；
字体大小：16px；
字体重量：轻；
显示：内联；
}
.明星{
背景图像：url（“https://image.ibb.co/mdSJgT/Hollow_Star.png");
宽度：14px；
高度：14px；
显示：内联块；
}
.集装箱{
填充：8px 8px；
边框：实心1px；
显示：内联块；
}
.星选{
背景图像：url（“https://image.ibb.co/hZ2Uo8/Filled_Star.png");
宽度：14px；
高度：14px；
显示：内联块；
}
.集装箱选择{
填充：8px 8px；
显示：内联块；
背景：#006DEF；
}
.h1select{
字体系列：无衬线；
字体大小：16px；
字体重量：轻；
显示：内联；
颜色：白色；
}

链接

您可以尝试以下解决方案：

https://codepen.io/anon/pen/jxdQav

jQuery

$('.divlink').on('click', function(e){
  $('.divlink').not(this).removeClass('active');
  $(this).addClass('active');
})

HTML

---

您可以尝试以下解决方案：

https://codepen.io/anon/pen/jxdQav

jQuery

$('.divlink').on('click', function(e){
  $('.divlink').not(this).removeClass('active');
  $(this).addClass('active');
})

HTML

---

这是正确的，但如果

ID

不是正确的方法，则切换。@AkshayPrakash:在ID上应用css也是不正确的方法。更好的方法是他采用“主动”类并切换，但这是根据其代码的解决方案。是的，正如我在回答中提到的，ID定义元素，而不是样式。这是正确的，但如果

ID

不是正确的方法。@AkshayPrakash:对id应用css也是不正确的方法。他最好采用“活动”类和开关，但这是根据他的代码的解决方案。是的，正如我在回答中提到的，id定义元素，而不是样式。