Question

我需要制作无限循环，标记<input>一个接一个地检查<input type="radio" name="nav" id="first"/> <input type="radio" name="nav" id="second"/> <input type="radio" name="nav" id="third"/> $(document).ready(function (){ setTimeout(function(){$("#third").prop('checked',true); }, 1000); setTimeout(function(){$("#second").prop('checked',true); }, 1000); setTimeout(function(){$("#first").prop('checked',true); }, 1000); });单选按钮的操作延迟一秒。我也希望能够通过.click事件来打破它。到目前为止，我设法写下这段代码，但它立即进行了最后的行动。此外，当我尝试使用while（true）循环时，我的浏览器崩溃。

{{1}}

我是JQuery和js

的新手

提前致谢

Answer 1

您需要调整或使用回调：

调整

$(document).ready(function (){ setTimeout(function(){ $("#third").prop('checked',true); }, 1000); setTimeout(function(){ $("#second").prop('checked',true); }, 2000); setTimeout(function(){ $("#first").prop('checked',true); }, 3000); });

回电

$(document).ready(function() { setTimeout(function() { $("#third").prop('checked', true); setTimeout(function() { $("#second").prop('checked', true); setTimeout(function() { $("#first").prop('checked', true); }, 1000); }, 1000); }, 1000); });

为无限的逻辑应用相同的逻辑，这是您的解决方案：

$(function () { $("input:checkbox").each(function () { $this = $(this); setTimeout(function () { $this.prop("checked", true); }, 1000); }); });

按点击事件突破：

还有另一个<input type="button" />元素：

<input type="button" id="break" value="Break" />

并附上此事件处理程序：

$("#break").click(function () { clearInterval(checker); });

为此，您需要稍微修改上述代码。

$(function () { breaker = setInterval(function () { if ($("input:checked").next("input:checkbox:not(:checked)")) clearInterval(breaker); $("input:checked").next("input:checkbox").prop("checked", true); }, 1000); });

更新：这是更具可扩展性和可行性。

Answer 2

使用while(true)来实现这一点肯定会导致问题。基本上任何使用while(true)而没有break语句的东西都会锁定UI。

然而，肯定有可能从这些中产生无限循环。有几种方法可以在这里准备选择。它们都可以通过它们的名称（＆＃34; nav＆＃34;）或者通过id选择，或者它们都是输入，或者它们可能位于另一个元素之下。为简单起见，我将使用它们的ID来播种，但是可以通过前面列出的其他几种方式来收集它们。

＆＃13;

//arrange the selectors
var ids = ["first","second","third"];

//setup the state of the loop
var current = 0, timer = -1, on = false;

//loop mechanic
function loopSelect(){
 timer = setTimeout(function(){
     current %= ids.length;
     $("#"+ids[(current++)%ids.length]).prop("checked",true);
     if(on)loopSelect();
 },1000);
}

//attach event handler
$("#b").click(function(){
    if(on){
        clearTimeout(timer);
        on = false;
        $('.on').hide();
        $('.off').show();
    }else{
        on = true;
        loopSelect();
        $('.on').show();
        $('.off').hide();
    }
});

＆＃13;

.on{
  display:none;
  background-color: green;
  color:white;
}
.off{
  background-color: red;
  color:white;
}

.indicators span{
  padding:6px;
  border-radius:3px;
  margin:5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <button id="b">Click to cycle the infinite loop</button>
</div>

<p class="indicators">
  <span class="on">on</span>
  <span class="off">off</span>
</p>

<p>
 <input type="radio" name="nav" id="first"/>
 <input type="radio" name="nav" id="second"/>
 <input type="radio" name="nav" id="third"/>
</p>

＆＃13;

Answer 3

这可能不是您正在寻找的答案，但可能对稍后回来的人有所帮助。如果您使用的是ES6 / ES2015或更高版本，则可以使用迭代器，假设您有无限数量的要循环的元素。

注意：此代码不依赖于ES6，但此示例使用iterator protocol。

＆＃13;

function makeIterator(elems){
    var nextIndex = 0;
    
    return {
       next: function() {
           elems.eq(nextIndex).prop('checked', 'checked');
           return nextIndex < elems.length ?
               {value: elems.eq(nextIndex++), done: false} :
               {done: true};
       }
    }
}

$(function() {
    var doCheck = makeIterator($('input[type=radio]'));
    var runIterator = setInterval(function() {
        if (doCheck.next().done) {
          clearInterval(runIterator);
        }
    }, 1000);
  
    $('button').on('click', function() {
        clearInterval(runIterator);
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="group">
<input type="radio" name="group">
<input type="radio" name="group">
<input type="radio" name="group">
<input type="radio" name="group">
<input type="radio" name="group">
<input type="radio" name="group">
<input type="radio" name="group">
<input type="radio" name="group">
<input type="radio" name="group">
<input type="radio" name="group">
<input type="radio" name="group">
<input type="radio" name="group">
<input type="radio" name="group">
<input type="radio" name="group">
<input type="radio" name="group">
<input type="radio" name="group">
<input type="radio" name="group">
<input type="radio" name="group">
<input type="radio" name="group">
<input type="radio" name="group">
<input type="radio" name="group">
<input type="radio" name="group">
<input type="radio" name="group">
<input type="radio" name="group">
<input type="radio" name="group">
<input type="radio" name="group">
<input type="radio" name="group">
<input type="radio" name="group">
<input type="radio" name="group">

<button id="stop">Stop!</button>

＆＃13;

循环少数.prop动作Jquery

3 个答案: