iCheck 更改皮肤时更改
iCheck change skin when changed
我正在使用 iCheck,我想在其状态发生变化时修改元素外观(例如,灰色表示未选中,绿色表示选中)。到目前为止,这是我尝试过的方法:
<!-- the html element I'm trying to change -->
<input type="checkbox" name="status" id="status" class="icheck">
<label for="status">Active</label>
//initializing fields
$('.icheck').each(function() {
var self = $(this),
label = self.next(),
label_text = label.text();
label.remove();
self.iCheck({
checkboxClass: 'icheckbox_line-grey',
radioClass: 'iradio_line-grey',
insert: '<div class="icheck_line-icon"></div>' + label_text
});
});
//how I'm trying to make it work
$('.icheck').on('ifChanged', function() {
var self = $(this);
var label = self.parent();
var label_text = label.text();
var checkboxClass;
var radioClass;
if (label_text == 'Ativado') {
checkboxClass = 'icheckbox_line-grey';
radioClass = 'iradio_line-grey';
label_text = 'Desativado'
} else if (label_text == 'Desativado') {
checkboxClass = 'icheckbox_line-green';
radioClass = 'iradio_line-green';
label_text = 'Ativado'
}
self.iCheck({
checkboxClass: checkboxClass,
radioClass: radioClass,
insert: '<div class="icheck_line-icon"></div>' + label_text
});
});
但是,上面的代码设法只改变了一次元素皮肤。
为了让它发挥作用,我在这里缺少什么?
在 ifChanged 事件中更新 iCheck。
参考:
self.iCheck({
checkboxClass: checkboxClass,
radioClass: radioClass,
insert: '<div class="icheck_line-icon"></div>' + label_text
});
现在,您的 ifChanged 事件不再有效,因为动态创建了一个新元素 (iCheck) 来替换旧元素。因此你需要一个不同的事件绑定:delegation:
$(document).on('ifChanged', 'input.icheck', function() {
此外,因为您从非活动状态开始,所以您需要更改此行:
<label for="status">Active</label>
至:
<label for="status">Inactive</label>
//initializing fields
$('.icheck').each(function() {
var self = $(this),
label = self.next(),
label_text = label.text();
label.remove();
self.iCheck({
checkboxClass: 'icheckbox_line-grey',
radioClass: 'iradio_line-grey',
insert: '<div class="icheck_line-icon"></div>' + label_text
});
});
//how I tried to make it work
$(document).on('ifChanged', 'input.icheck', function() {
var self = $(this);
var label = self.parent();
var label_text = label.text();
var checkboxClass;
var radioClass;
if (label_text == 'Active') {
checkboxClass = 'icheckbox_line-grey';
radioClass = 'iradio_line-grey';
label_text = 'Inactive'
} else if (label_text == 'Inactive') {
checkboxClass = 'icheckbox_line-green';
radioClass = 'iradio_line-green';
label_text = 'Active'
}
self.iCheck({
checkboxClass: checkboxClass,
radioClass: radioClass,
insert: '<div class="icheck_line-icon"></div>' + label_text
});
}).trigger('ifChanged');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/skins/all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/icheck.min.js"></script>
<input type="checkbox" name="status" id="status" class="icheck">
<label for="status">Inactive</label>
我正在使用 iCheck,我想在其状态发生变化时修改元素外观(例如,灰色表示未选中,绿色表示选中)。到目前为止,这是我尝试过的方法:
<!-- the html element I'm trying to change -->
<input type="checkbox" name="status" id="status" class="icheck">
<label for="status">Active</label>
//initializing fields
$('.icheck').each(function() {
var self = $(this),
label = self.next(),
label_text = label.text();
label.remove();
self.iCheck({
checkboxClass: 'icheckbox_line-grey',
radioClass: 'iradio_line-grey',
insert: '<div class="icheck_line-icon"></div>' + label_text
});
});
//how I'm trying to make it work
$('.icheck').on('ifChanged', function() {
var self = $(this);
var label = self.parent();
var label_text = label.text();
var checkboxClass;
var radioClass;
if (label_text == 'Ativado') {
checkboxClass = 'icheckbox_line-grey';
radioClass = 'iradio_line-grey';
label_text = 'Desativado'
} else if (label_text == 'Desativado') {
checkboxClass = 'icheckbox_line-green';
radioClass = 'iradio_line-green';
label_text = 'Ativado'
}
self.iCheck({
checkboxClass: checkboxClass,
radioClass: radioClass,
insert: '<div class="icheck_line-icon"></div>' + label_text
});
});
但是,上面的代码设法只改变了一次元素皮肤。
为了让它发挥作用,我在这里缺少什么?
在 ifChanged 事件中更新 iCheck。
参考:
self.iCheck({
checkboxClass: checkboxClass,
radioClass: radioClass,
insert: '<div class="icheck_line-icon"></div>' + label_text
});
现在,您的 ifChanged 事件不再有效,因为动态创建了一个新元素 (iCheck) 来替换旧元素。因此你需要一个不同的事件绑定:delegation:
$(document).on('ifChanged', 'input.icheck', function() {
此外,因为您从非活动状态开始,所以您需要更改此行:
<label for="status">Active</label>
至:
<label for="status">Inactive</label>
//initializing fields
$('.icheck').each(function() {
var self = $(this),
label = self.next(),
label_text = label.text();
label.remove();
self.iCheck({
checkboxClass: 'icheckbox_line-grey',
radioClass: 'iradio_line-grey',
insert: '<div class="icheck_line-icon"></div>' + label_text
});
});
//how I tried to make it work
$(document).on('ifChanged', 'input.icheck', function() {
var self = $(this);
var label = self.parent();
var label_text = label.text();
var checkboxClass;
var radioClass;
if (label_text == 'Active') {
checkboxClass = 'icheckbox_line-grey';
radioClass = 'iradio_line-grey';
label_text = 'Inactive'
} else if (label_text == 'Inactive') {
checkboxClass = 'icheckbox_line-green';
radioClass = 'iradio_line-green';
label_text = 'Active'
}
self.iCheck({
checkboxClass: checkboxClass,
radioClass: radioClass,
insert: '<div class="icheck_line-icon"></div>' + label_text
});
}).trigger('ifChanged');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/skins/all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/icheck.min.js"></script>
<input type="checkbox" name="status" id="status" class="icheck">
<label for="status">Inactive</label>