iCheck - 设置兄弟姐妹的颜色
iCheck - set color of the siblings
我正在使用 jQuery 库 'iCheck' 作为输入,并且我正在尝试将标签的颜色设置为绿色,以解决那些回答得很好的问题。当我不使用 iCheck 时一切正常,但当我使用该库时,我的脚本似乎没有效果。我做错了什么?
HTML 文档
<div class="radio" >
{% if answer.is_valid == True %}
<input type="radio" name="question-{{ question.id }}" id=" {{answer.text}}">
{% else %}
<input type="radio" name="question-{{ question.id }}" id="{{answer.text}}">
{% endif %}
<label><b>{{ answer.text }}</b></label>
</div>
JS
$('.check').click( function () {
var score = 0
var all = $('input[id^=" "]');
var checked = $('input:checked');
var good = $('input:checked[id^=" "]');
checked.siblings().css('color', 'red');
all.siblings().css('color', 'green');
good.each ( function(){
score += 1;
})
alert(score);
score = 0;
});
这是因为 icheck
以这样一种方式更改了 DOM,以至于您的原始输入甚至不再可见。检查 DOM 浏览器以查看 iCheck
更改了您的
<input type="radio" name="question-{{ question.id }}" id=" {{answer.text}}">
到
<div class="iradio_flat-pink" aria-checked="false" aria-disabled="false" style="position: relative;">
<input type="radio" name="question-1" id="text" style="position: absolute; opacity: 0;">
<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;">
</ins>
</div>
或类似的东西。
要更改元素的颜色,您需要改用 iCheck 函数并给它一个不同的 class:
$('#input1').iCheck({
radioClass: 'radio-green' //or something you like.
});
试试这个!
$( document ).ready(function () {
if ($("input.flat")[0]) {
$(document).ready(function () {
$('input.flat').iCheck({
checkboxClass: 'icheckbox_flat-blue',
radioClass: 'iradio_flat-blue'
});
});
}
});
我正在使用 jQuery 库 'iCheck' 作为输入,并且我正在尝试将标签的颜色设置为绿色,以解决那些回答得很好的问题。当我不使用 iCheck 时一切正常,但当我使用该库时,我的脚本似乎没有效果。我做错了什么?
HTML 文档
<div class="radio" >
{% if answer.is_valid == True %}
<input type="radio" name="question-{{ question.id }}" id=" {{answer.text}}">
{% else %}
<input type="radio" name="question-{{ question.id }}" id="{{answer.text}}">
{% endif %}
<label><b>{{ answer.text }}</b></label>
</div>
JS
$('.check').click( function () {
var score = 0
var all = $('input[id^=" "]');
var checked = $('input:checked');
var good = $('input:checked[id^=" "]');
checked.siblings().css('color', 'red');
all.siblings().css('color', 'green');
good.each ( function(){
score += 1;
})
alert(score);
score = 0;
});
这是因为 icheck
以这样一种方式更改了 DOM,以至于您的原始输入甚至不再可见。检查 DOM 浏览器以查看 iCheck
更改了您的
<input type="radio" name="question-{{ question.id }}" id=" {{answer.text}}">
到
<div class="iradio_flat-pink" aria-checked="false" aria-disabled="false" style="position: relative;">
<input type="radio" name="question-1" id="text" style="position: absolute; opacity: 0;">
<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;">
</ins>
</div>
或类似的东西。
要更改元素的颜色,您需要改用 iCheck 函数并给它一个不同的 class:
$('#input1').iCheck({
radioClass: 'radio-green' //or something you like.
});
试试这个!
$( document ).ready(function () {
if ($("input.flat")[0]) {
$(document).ready(function () {
$('input.flat').iCheck({
checkboxClass: 'icheckbox_flat-blue',
radioClass: 'iradio_flat-blue'
});
});
}
});