循環幾個.prop動作jquery

Question

我需要做出無限循環出標記<input>單選按鈕檢查一個接一個延遲一秒鐘。我也希望能夠通過.click事件來打破它。到目前爲止，我設法寫下這段代碼，但它直接轉到最後一個操作。此外，當我嘗試使用while（true）循環我的瀏覽器崩潰。

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

我是新來的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。

但是，無限循環當然是可以做到的。有幾種方法可以在這裏準備選擇。它們都可以通過它們的名字（「nav」）來選擇，例如，或者通過id，或者它們都是輸入，或者它們可能位於另一個單元之下。爲了簡單起見，我會用他們的id來種子，但也可以用前面列出的其他幾種方法收集它們。

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

.on{ 
 
    display:none; 
 
    background-color: green; 
 
    color:white; 
 
} 
 
.off{ 
 
    background-color: red; 
 
    color:white; 
 
} 
 

 
.indicators span{ 
 
    padding:6px; 
 
    border-radius:3px; 
 
    margin:5px; 
 
}

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

Answer 3

這可能不是你要找的答案，但可能會有所幫助的人稍後再回來。如果您使用ES6/ES2015或更高版本，則可以使用 迭代器，前提是您有無限數量的要循環訪問的元素。

注：此代碼不依賴於ES6，但是這個示例使用iterator protocol。

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

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