在单击时，我的类的JavaScript事件内容不会应用于html <p>。
在单击时，我的类的JavaScript事件内容不会应用于html <p>。
提问于 2018-03-25 02:41:09
我将JavaScript类设置为p，所以当单击它时，它应该会改变颜色，下面是<p>元素：
<p class="classItem"></p>下面是classItem css类：
.classItem {
display: block;
width: 90%;
margin: 5px auto 0 auto;
height: 40px;
text-align: center;
color: #fff;
background-color: #3266cc;
border-radius: 2px;
line-height: 40px;
font-size: 14px;
transition: all 0.3s ease-in-out;
box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
cursor: pointer;
font-family: Roboto, sans-serif;
}在那里你可以看到背景色(#3266cc)-蓝色，我想点击一下就把它变成红色，所以我创建了css类
.activeClassItem {
background-color: red!important;
}在javascript上，我说，当我单击这个项目时，让我们也应用activeClassItem类，因此它会将背景颜色设置为红色，并且类实际上是应用的，但颜色不变：
$("body").on("click", ".classItem", function () {
$(".activeClassItem").removeClass("activeClassItem");
$(this).addClass("activeClassItem");
});当我检查窗口时，类就在那里：
<p class="classItem activeClassItem"></p>所以伙计们，即使类被应用了，我也看不到不幸的背景变化…
任何帮助都是很棒的，谢谢
回答 1
Stack Overflow用户
发布于 2018-03-25 02:47:38
这是一个工作示例，如果问题仍然存在，请考虑使用其他浏览器进行测试或尝试更新您的浏览器
$("body").on("click", ".classItem", function () {
$(".activeClassItem").removeClass("activeClassItem");
$(this).addClass("activeClassItem");
});.classItem {
display: block;
width: 90%;
margin: 5px auto 0 auto;
height: 40px;
text-align: center;
color: #fff;
background-color: #3266cc;
border-radius: 2px;
line-height: 40px;
font-size: 14px;
transition: all 0.3s ease-in-out;
box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
cursor: pointer;
font-family: Roboto, sans-serif;
}
.activeClassItem{
background-color:red !important
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<p class="classItem"></p>
</body>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49468475
复制相关文章
相似问题
腾讯云开发者
