时间戳

首页 > 解决方案 > 每 2 秒将 li 的文本显示到输入中

javascript - 每 2 秒将 li 的文本显示到输入中

问题描述

按下后button，我想按input顺序每两秒显示一次完整的列表文本li

A -- B -- C -- D -- E

我试过这个，但它不工作

 <button>show li in order every 2 seconds</button>

 <input type=text id="show" />


$("button").on("click",function(){
		 $(".menu li").each(function(){
			 setTimeout(function() { $("show").($(this).text()); }, 2000);
  });
	});
input{
width:40px;
height:40px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<button>show li in order every 2 seconds</button>

<input type=text id="show" />
<ul class="menu">

<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>

标签： javascriptjquery

解决方案

您需要从增量使用setInterval和设置文本.menu li

$("button").on("click", function() {
  var items = $(".menu li"), idx = 0;

  var timer = setInterval(function() {
    var currText = items.eq(idx).text()
    if (idx < items.length - 1) idx++;
    // else idx = 0;
    else clearInterval(timer); // Use this for clearing the timer
    
    $("#show").val(currText);
    if(idx > 0) items.eq(idx - 1).hide(); // Hide previous <li>
  }, 2000);
});
input {
  width: 40px;
  height: 40px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<button>show li in order every 2 seconds</button>

<input type=text id="show" />
<ul class="menu">

  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
</ul>

推荐阅读