提问人：in2d 提问时间：1/22/2017 最后编辑：Mihai Alexandru-Ionutin2d 更新时间：8/30/2017 访问量：8676
使用 javascript onclick 更改类 css
Change class css with javascript onclick
问：
当我点击它时，我如何使用 javascript 更改 css？我想将 .javakast 更改为 .javakast2，当我多次单击它时，它应该来回移动。
<script>
$(".ribad").click(function(){
$("javakast").toggleClass("javakast2");
});
</script>
CSS的
.javakast{
background-color:blue;
width:200px;
height:200px;
margin-top:-20px;
margin-left:-20px;
position:absolute;
z-index:999999;
}
.javakast2{
background-color:red;
width:200px;
height:200px;
margin-top:-20px;
margin-left:300px;
position:absolute;
z-index:999999;
}
[HTML全文]
<div class="ribad">
<div class="javakast"></div>
<div>
答：
3赞
Mihai Alexandru-Ionut
1/22/2017
#1
您使用，这不是正确的选择器。您必须使用 .此外，您必须在函数中编码。$("javakast")$(".javakast")wrap$(document).ready()
$(document).ready(function(){
$(".ribad").click(function(){
$(".javakast").toggleClass("javakast2");
});
});
$(".ribad").click(function(){
$(".javakast").toggleClass("javakast2");
});.javakast{
background-color:blue;
width:200px;
height:200px;
margin-top:-20px;
margin-left:-20px;
position:absolute;
z-index:999999;
}
.javakast2{
background-color:red;
width:200px;
height:200px;
margin-top:-20px;
margin-left:-20px;
position:absolute;
z-index:999999;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ribad">
<div class="javakast"></div>
<div>评论
0赞
in2d
1/22/2017
似乎不起作用。这很奇怪，因为我的另一个脚本工作得很好。
0赞
in2d
1/22/2017
没有错误。这里还有一些CSS .ribad{ font-family： 'Montserrat'， sans-serif; position：relative; border-top：solid 10px #3F8686; width： 100%; height： auto; padding：20px; margin：auto; margin-top：30px; text-align：center; } 不可能不点击 .ribad 它很大。
0赞
in2d
1/22/2017
是的。我试过使用$（document）.ready和没有它。这段简单的代码不久前在同一个文件中工作，但我删除了它。
3赞
Ataur Rahman Munna
1/22/2017
#2
在里面使用你的jquery方法
<script>
$(function(){
$(".ribad").click(function(){
$(".javakast").toggleClass("javakast2");
});
});
</script>
1赞
Shoaib Konnur
1/22/2017
#3
页面准备就绪后，应绑定到元素。 这是它的代码。
<script>
$(document).ready(function(){
$(".ribad").click(function(){
$("javakast").toggleClass("javakast2");
});
});
</script>
1赞
ab29007
1/22/2017
#4
您正在使用 jquery 通过类选择元素，然后您必须在它前面包含 a。.
<script>
$(".ribad").click(function(){
$(".javakast").toggleClass("javakast2");
});
</script>
如果你没有在正文的末尾包含你的脚本，那么使用jQuery方法，就像这样ready
$(document).ready(function(){
$(".ribad").click(function(){
$(".javakast").toggleClass("javakast2");
});
});
1赞
user4602228
1/22/2017
#5
Jquery切换是打开/关闭单个类。 您需要在两个不同的类之间切换。
看到这个 stackoverflow 答案...
根据这个答案，你应该尝试：
$(".ribad").click(function(){
$(".javakast, .javakast2").toggleClass("javakast javakast2");
});
1赞
Adam Azad
1/22/2017
#6
这就是您所追求的解决方案。我不认为你想在添加和删除之间切换，而是在类之间切换。如果元素有，则将其类替换为 ，反之亦然。javakast2.javakastjavakastjavakast2
$('#toggle').on('click', function(){
// Save matches to a variable
var classJSK = $(".javakast:not(.javakast2)");
var classJSK2 = $(".javakast2:not(.javakast)");
classJSK.each(function(){
$(this).addClass('javakast2').removeClass('javakast');
});
classJSK2.each(function(){
$(this).removeClass('javakast2').addClass('javakast');
});
});div {
width:100px;
height:100px;
}
.javakast{
background-color:blue;
}
.javakast2{
background-color:red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle">toggle</button>
<div class="javakast"></div>
<div class="javakast2"></div>
1赞
Klaus Mikaelson
1/22/2017
#7
$(function () {
$("#ribad").click(function () {
$(".javakast").switchClass("javakast", "javakast2");
$(".javakast2").switchClass("javakast2", "javakast");
});
});.javakast{
color:red;
}
.javakast2{
color:blue;
}<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="ribad" id="ribad">
<div class="javakast" id="javakast">
<h1>Click me to change class</h1>
</div>
</div>不要忘记添加您的文件。<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
评论