jquery:改变输入标签的颜色
<label>
<input type="radio" id="other" name="level_0" value="other" class="other">other
</label>
说我有上面的一个无序列表。点击单选按钮时,我希望标签被涂成红色。jquery:改变输入标签的颜色
我曾尝试以下:
$('input[type=radio]').click(function(){
if($(this).is(':checked')){
$(this).prev().css("color","red");
}
});
不应该这样抢前一个元素,“标签”,并改变其颜色为红色?
$('input[type=radio]').click(function() {
if ($(this).is(':checked')) {
$(this).closest('label').addClass("red");
}
});
.red {
color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<input type="radio" id="other" name="level_0" value="other" class="other">other
</label>
- 使用
.closest()
-
.prev()
用于同级元素。 - 也可以用
.parent()
- 建议使用
.addClass()
,而不是添加风格直接
我假设prev()查询搜索太远。当我将它改为parent()(这很有意义,因为输入在标签内),它可以正常工作。当你不研究你正在做的事情的基本原理时,会发生这种情况!
,你也可以使用这个
$('input[type=radio]').click(function(){
if($(this).is(':checked')){
$(this).closest('label').css({"color":"red"});
}
});
变化prev()到最近的()和支架括号内,如果你想使用CSS()
你不”不需要为此使用jquery - 让CSS完成这一切。同样 - 要清楚 - 您是否在标签文本之后 - 是红色(使用颜色)还是标签背景是红色(使用背景)。这将更改输入的选中状态而不是点击事件的标签颜色/背景。
从CSS技巧网站(https://css-tricks.com/almanac/selectors/c/checked/) - “的:检查伪类选择签或切换成开启状态。如果他们不选择或检查时匹配无线电和checkbox的输入类型,不匹配。” 。
请注意,这会影响输入后的标签。
input[type=radio]:checked + label{
color:red
}
<input type="radio" id="option1" name="level_0" value="1" class="other">
<label>option 1</label>
<input type="radio" id="option2" name="level_0" value="2" class="other">
<label>option 2</label>
感谢,但我想改变文本显示为红色,所以我可以练习走动元素与jQuery。我会用它来弄清楚如何让(和隐藏)父母兄弟姐妹的孩子。这可能是我发布的下一个问题。 –
'.prev()用于兄弟姐妹element.'它不会搜索太远 – guradio