Question

我有点卡住我的一些单选按钮。

如果删除标签，下面的代码绝对可以正常使用 - 问题是我需要标签以及它们所在的确切位置。

基本上我有一个单选按钮列表，我正在尝试运行一个循环遍历每个按钮的功能，将它们设置为一个接一个地检查。

当用户点击单选按钮时，整个序列应该停止。正如我所提到的那样没有标签它可以正常工作，而目前它检查第一，然后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();
})

干杯

Answer 1

index函数将为您提供与其容器相关的当前对象的位置。由于您的容器同时包含label元素和input元素，因此当前input:checked的位置为＆＃34;错误＆＃34;通过你的代码。

您可以做的是获取与仅输入相关的已检查输入的索引：

$('input').index($('input:checked'))

检查此示例：

＆＃13;

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();
})

＆＃13;

<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>

＆＃13;

Answer 2

添加变量有效。这是你需要的吗？

<cities>
  <city>
    <state_id>100<state_id>
    <city_name>Los Angeles</city_name>
    <name>California</name>
  </city>
  <city>
    <state_id>100<state_id>
    <city_name>San Francisco</city_name>
    <name>California</name>
  </city>
  <city>
    <state_id>200<state_id>
    <city_name>Chicago</city_name>
    <name>Illinois</name>
  </city>
</cities>

https://jsfiddle.net/9dow1mep/5/

Jquery单选按钮问题

2 个答案: