我正在玩一些简单的代码,但无法将其整理出来 :( 我想为选定的单选按钮和之前的单选按钮添加颜色(类)...例如,如果选择了 3 号按钮 1,2,3应该得到一种新颜色。
这是一个简单的代码
<form>
<ul>
<li>
<input id="radio1" type="radio" name="radio[]" value="1">
<label for="radio1">one</label>
</li>
<li>
<input id="radio2" type="radio" name="radio[]" value="2">
<label for="radio2">two</label>
</li>
<li>
<input id="radio3" type="radio" name="radio[]" value="3">
<label for="radio3">three</label>
</li>
<li>
<input id="radio4" type="radio" name="radio[]" value="4">
<label for="radio4">four</label>
</li>
<li>
<input id="radio5" type="radio" name="radio[]" value="5">
<label for="radio5">five</label>
</li>
</ul>
我试过 .prevAll() 但显然它没有用。
这是为所有按钮添加类的当前脚本
$(document).ready(function(e) {
$("input[type=radio]").click(function(){
$('form ul li input[type=radio] + label').addClass('abc');
})
});
演示 https://jsfiddle.net/8jct6tfs/2/
我应该使用循环吗?任何帮助将不胜感激
最佳答案
Use
.index()
of theclosest
li
element of the clicked element and Using:lt
(Elements having smaller index than specified) selector, apply class
试试这个:
$(document).ready(function(e) {
$("input[type=radio]").click(function() {
$('form ul li input[type=radio] + label').removeClass('abc')
var index = $(this).closest('li').index();
$('form ul li input[type=radio] + label:lt("' + index + '")').addClass('abc');
})
});
form {
max-width: 500px;
margin-top: 25px;
}
form ul li {
display: inline-block;
width: 20%;
text-align: center;
vertical-align: top;
float: left;
position: relative
}
input {
position: relative;
top: 0;
left: 50%;
margin-left: -6px;
display: none;
}
input[type=radio]:checked + label::before {
content: '';
position: absolute;
border-radius: 100%;
left: 50%;
top: 0;
width: 30px;
height: 30px;
margin: -12px 0 0 -15px;
background-color: red;
}
input[type=radio] + label::before {
content: '';
position: absolute;
border-radius: 100%;
left: 50%;
top: 0;
width: 30px;
height: 30px;
margin: -12px 0 0 -15px;
background-color: gray;
}
label {
padding-top: 55px;
}
/*this class should be added*/
input[type=radio] + label.abc::before {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form>
<ul>
<li>
<input id="radio1" type="radio" name="radio[]" value="1">
<label for="radio1">one</label>
</li>
<li>
<input id="radio2" type="radio" name="radio[]" value="2">
<label for="radio2">two</label>
</li>
<li>
<input id="radio3" type="radio" name="radio[]" value="3">
<label for="radio3">three</label>
</li>
<li>
<input id="radio4" type="radio" name="radio[]" value="4">
<label for="radio4">four</label>
</li>
<li>
<input id="radio5" type="radio" name="radio[]" value="5">
<label for="radio5">five</label>
</li>
</ul>
</form>
关于javascript - 为所有以前的单选按钮和选定的单选按钮添加类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35721876/