Jquery单选按钮问题
Jquery单选按钮问题
提问于 2016-09-22 22:17:10
我有点被一些单选按钮卡住了。
如果我删除标签的话，下面的代码工作得非常好--问题是我需要标签在那里，在它们所处的确切位置。
基本上，我有一个单选按钮的列表，我试图运行一个函数，通过每个按钮循环，将它们设置为一个接一个地检查。
当用户单击单选按钮时，整个序列应该停止。正如我所提到的，没有标签，它可以正常工作，但是目前它检查第一个和第3个，然后只在这两个之间循环。
我希望这是有意义的，希望有人能给我指明正确的方向。
干杯
JSfiddle - https://jsfiddle.net/imchris/9dow1mep/
HTML -
<label for="test-1">label</label>
<input id="test-2" type="radio" name="testing" class="toggle"/>
<label for="test-2">label</label>
<input id="test-3" type="radio" name="testing" class="toggle"/>
<label for="test-3">label</label>
<input id="test-4" type="radio" name="testing" class="toggle"/>
<label for="test-4">label</label>
<input id="test-5" type="radio" name="testing" class="toggle"/>
<label for="test-5">label</label>
<input id="test-6" type="radio" name="testing" class="toggle"/>
<label for="test-6">label</label>JS -
startCycle();
var intervalID;
function startCycle() {
intervalID = setInterval(function(){
$('input').eq(($('input:checked').index() + 1) % 6).prop('checked', true);
},500);
}
function stopCycle(){
clearInterval(intervalID);
}
$('.toggle').click(function(e){
stopCycle();
})干杯
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-09-22 22:35:57
index函数将为您提供与其容器相关的当前对象的位置。因为容器同时拥有label元素和input元素，所以当前input:checked的位置在代码中是“错误的”。
您可以做的是获取与相关的检查输入的索引，只输入：
$('input').index($('input:checked'))请检查此示例：
startCycle();
var intervalID;
function startCycle() {
intervalID = setInterval(function(){
$('input').eq(( $('input').index($('input:checked')) + 1) % 6).prop('checked', true);
},500);
}
function stopCycle(){
clearInterval(intervalID);
}
$('.toggle').click(function(e){
stopCycle();
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="test-1">label</label>
<input id="test-2" type="radio" name="testing" class="toggle"/>
<label for="test-2">label</label>
<input id="test-3" type="radio" name="testing" class="toggle"/>
<label for="test-3">label</label>
<input id="test-4" type="radio" name="testing" class="toggle"/>
<label for="test-4">label</label>
<input id="test-5" type="radio" name="testing" class="toggle"/>
<label for="test-5">label</label>
<input id="test-6" type="radio" name="testing" class="toggle"/>
<label for="test-6">label</label>
Stack Overflow用户
发布于 2016-09-22 22:29:46
添加变量可以工作。这就是你需要的吗？
startCycle();
var intervalID;
i=0;
function startCycle() {
intervalID = setInterval(function(){
/* $('input').eq(($('input:checked').index() + 1) % 6).prop('checked', true);*/
$('input').eq(i % 6).prop('checked', true);
i++
},500);
}
function stopCycle(){
clearInterval(intervalID);i=0;
}
$('.toggle').click(function(e){
stopCycle();
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39649728
复制相关文章
相似问题
腾讯云开发者
