jQuery 递减循环答案

【问题标题】：jQuery Decremental LoopjQuery 递减循环
【发布时间】：2018-01-16 19:02:44
【问题描述】：

我需要做一个 jQuery 递增/递减循环。

所以我在这里发布了香草 JavaScript，谁能帮我把它改成 jQuery 代码。

var incomeTicker = 60;

window.setInterval(function(){
	
 	if (incomeTicker > 0){
	 	incomeTicker--;
		document.getElementById("incomeTicker").innerHTML = "Next Profit In : " + incomeTicker + " seconds";
// other code implemented as long as incomTicker > 0

	}
	
	if (incomeTicker <= 1){
  
  //code that is implemented when incomeTicker <=1
	
  incomeTicker = 60;
		
  //code that is implemented when incomeTicker <=1
	}
}, 1000);

&lt;span class = "incomeTicker" id = "incomeTicker" &gt; Next Profit In : 100 seconds&lt;/span&gt;

谁能帮忙把它翻译成jQuery？它必须在循环完成后递减然后重置，如 sn-p

所示

【问题讨论】：

你唯一需要改变的是$()而不是document.getElementById()和.html()方法而不是.innerHTML = 。
由于 jQuery 并没有真正做间隔或增量，你真正需要将其转换为 jQuery 是 $('#incomeTicker').html('Next Pro...') tada ！

标签： javascript jquery html loops decrement

【解决方案1】：

这里有一个解决方案https://jsfiddle.net/vh0obhz6/

var incomeTicker = 60;

window.setInterval(function(){
   if (incomeTicker > 1){
      incomeTicker--;
      $("#incomeTicker").html(`Next Profit In : ${incomeTicker} seconds`);
   }else{
      incomeTicker = 60;
   }
}, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class = "incomeTicker" id = "incomeTicker" > Next Profit In : 100 seconds</span>

【讨论】：

它不工作——它在日志中更新错误但不影响 DOM
{ "message": "Uncaught ReferenceError: $ is not defined", "filename": "stacksnippets.net/js", "lineno": 19, "colno": 7 } { "message": “未捕获的 ReferenceError：$ 未定义”，“文件名”：“stacksnippets.net/js”，“lineno”：19，“colno”：7 } { “消息”：“未捕获的 ReferenceError：$ 未定义”，“文件名” ：“stacksnippets.net/js”，“lineno”：19，“colno”：7 } {“消息”：“未捕获的 ReferenceError：$ 未定义”，“文件名”：“stacksnippets.net/js”，“lineno”：19， “科诺”：7 }
你缺少 jQuery，添加库

【解决方案2】：

var incomeTicker = 60;

window.setInterval(function(){

    if (incomeTicker > 0){
        incomeTicker--;
        $("#incomeTicker").html("Next Profit In : " + incomeTicker + " seconds");
// other code implemented as long as incomTicker > 0

    }

    if (incomeTicker <= 1){

  //code that is implemented when incomeTicker <=1

  incomeTicker = 60;

  //code that is implemented when incomeTicker <=1
    }
}, 1000);

【讨论】：

【解决方案3】：

你应该使用更多的 jQuery，它可以做所有事情。

以下是添加更多 jQuery 的方法

$.incomeTicker = 60;

(function rec() {
  $.each((new Array($.incomeTicker)).fill(0), function(i) {
    var sec = Math.abs(i - $.incomeTicker);
    $('#incomeTicker').delay(1000).queue(function(n) {
      $(this).html("Next Profit In : " + sec + " seconds"); 
      n(); if (sec === 1) rec();
    });
  });
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="incomeTicker"></div>

【讨论】：