$('#axe, #saw').click(function(e) {
var id = $(this).attr('id');
if (id == 'axe') {
$(this).toggleClass('as-in-one as-one');
} else if (id == 'saw') {
$(this).toggleClass('as-in-two as-two');
}
})
.as-in-one {
color: red;
}
.as-one {
color: blue;
}
.as-in-two {
color: red;
}
.as-two {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='axe' class='axe as-in-one'>AXE</button>
<button id='saw' class='saw as-in-two'>SAW</button>
在我的代码中,我只想更改一个按钮的类,从 red
到 blue
,但是如果我点击另一个按钮,第一个按钮会变如果它是 blue
,则为默认类 red
,另一个切换为 blue
,反之亦然。
最佳答案
也许不是我想做的 - 但你去吧!当axe
单击,添加 as-in-two
类并删除 as-two
上课,什么时候saw
单击,添加 as-in-one
类并删除 as-one
类。
请看下面的演示:
$('#axe, #saw').click(function(e) {
var id = $(this).attr('id');
if (id == 'axe') {
$(this).toggleClass('as-in-one as-one');
$('#saw').addClass('as-in-two');
$('#saw').removeClass('as-two');
} else if (id == 'saw') {
$(this).toggleClass('as-in-two as-two');
$('#axe').addClass('as-in-one');
$('#axe').removeClass('as-one');
}
})
.as-in-one {
color: red;
}
.as-one {
color: blue;
}
.as-in-two {
color: red;
}
.as-two {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='axe' class='axe as-in-one'>AXE</button>
<button id='saw' class='saw as-in-two'>SAW</button>
最好使用单个 red
和 blue
类:
$('.as-in-one').click(function(e) {
$('.as-in-one').not(this).removeClass('as-one');
$(this).toggleClass('as-one');
})
.as-in-one {
color: red;
}
.as-in-one.as-one {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='axe' class='as-in-one'>AXE</button>
<button id='saw' class='as-in-one'>SAW</button>
关于javascript - 两个按钮像单选按钮一样改变类,但一次只有一个,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45551985/