[英]How to change class in button when you click on it
我有两个按钮:没有背景和绿色,当我单击它们时我需要对其进行更改(从绿色到带有虚线边框的那个)
这是我的html:
<div class="btns">
<button type="button" class="btn btn-success">Муж</button>
<button type="button" class="btn btn-link btn-simple">Жен</button>
</div>
我写了这样的脚本:
$('.btn').click(function() {
var $this = $(this);
if ($this.hasClass('btn-success')) {
$this.removeClass().addClass('btn-simple');
} else if ($this.hasClass('btn-simple')) {
$this.removeClass('btn-simple').addClass('btn-success');
}
});
但这不起作用。
这是我添加到css文件中的内容:
.btn-simple {
border-bottom: 1px dashed #000;
color: #000;
}
没有别的,因为这些是引导程序按钮。
您应该在document.ready方法中添加代码。
$(document).ready(function () {
$('.btn').click(function () {
var $this = $(this);
if ($this.hasClass('btn-success')) {
$this.removeClass().addClass('btn-simple');
} else if ($this.hasClass('btn-simple')) {
$this.removeClass('btn-simple').addClass('btn-success');
}
});
});
您需要添加要删除的类,例如:$ this.removeClass('btn-success')。 在下面的链接中,我举了一个例子。
$('.btn').click(function(){
var $this = $(this);
if (!$this.hasClass('btn-success')) {
$('.btn').removeClass('btn-success')
$this.addClass('btn-success');
}
})
您没有删除btn-success类之一。 另外,我认为您应该添加btn-link类。 还要将整件包裹在document.ready中
$(document).ready(function () {
$('.btn').click(function() {
var $this = $(this);
if ($this.hasClass('btn-success')) {
$this.removeClass('btn-success').addClass('btn-simple');
} else if ($this.hasClass('btn-simple')) {
$this.removeClass('btn-simple').addClass('btn-link').addClass('btn-success');
}
});
});
假设您要在共享容器内的按钮之间切换。
/* longer version for demonstration purposes */ $('.btn').click(function() { var thisParent = $(this).closest('.btns'); $(thisParent).find('.btn-success').addClass('btn-simple') $(thisParent).find('.btn-success').removeClass('btn-success'); $(this).removeClass('btn-simple'); $(this).addClass('btn-success'); }) /* shorter version $('.btn').click(function() { $(this).closest('.btns').find('.btn-success').addClass('btn-simple').removeClass('btn-success'); $(this).removeClass('btn-simple').addClass('btn-success'); }) */
* { outline: 0; } button { border-style: none; cursor: pointer; padding: 5px; } button::-moz-focus-inner { border: 0; } /* ignore above */ .btn-simple { border-bottom: 1px dashed #000; color: #000; } .btn-success { background-color: hsla(96, 92%, 37%, 1); border-radius: 2px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="btns"> <button type="button" class="btn btn-success">Муж</button> <button type="button" class="btn btn-link btn-simple">Жен</button> </div> <div class="btns"> <button type="button" class="btn btn-success">Муж</button> <button type="button" class="btn btn-link btn-simple">Жен</button> <button type="button" class="btn btn-link btn-simple">три</button> </div>
小提琴
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.