Question

我有一个自动减少的列表，并在一段时间后使用DateTime date1 = DateTime.UtcNow; Console.WriteLine(String.Format("{0:%z}, {0:zz}, {0:zzz}", date1)); // Displays -7, -07, -07:00 DateTimeOffset date2 = new DateTimeOffset(2008, 8, 1, 0, 0, 0, new TimeSpan(6, 0, 0)); Console.WriteLine(String.Format("{0:%z}, {0:zz}, {0:zzz}", date2)); // Displays +6, +06, +06:00隐藏列表中的每个项目，并且它运行正常。我尝试做的是创建一些代码，允许我单击一个按钮，让我的所有列表项重新生成，但是我在执行此操作时遇到了麻烦。点击我的再生代码附加的按钮后，我就无法获得预期的结果。它重新生成我的列表项，但随后减少代码停止工作。有时它只隐藏1个项目，有时它会隐藏2个但是它会完全停止。我的健康再生代码没有正常工作。请帮我解决这个问题。

for loop

这是健康耗尽代码

<!--THIS IS MY LIST-->
<div class="health-bar">
    <ul>
    <li class="heart5"><img src="heart.png" alt="Smiley face"  width="60px"></li>
    <li class="heart4"><img src="heart.png" alt="Smiley face"  width="60px"></li>
    <li class="heart3"><img src="heart.png" alt="Smiley face"  width="60px"></li>
    <li class="heart2"><img src="heart.png" alt="Smiley face"  width="60px"></li>
    <li class="heart1"><img src="heart.png" alt="Smiley face"  width="60px"></li>
</ul>

这是健康再生代码，它没有正常工作

function healthDeplete(){
var lis = $(".health-bar ul li");
for(var i=0; i<=lis.length; i++){
   (function(i) {
    setTimeout(function(){
     lis.eq(i).hide();
    }, i * 2000);
   })(i);
  }
};

Answer 1

您可以使用解决方案

function healthDeplete(){
  var lis = $(".health-bar ul li");
  for(var i=0; i<=lis.length; i++){
   (function(i) {
    setTimeout(function(){
     lis.eq(i).hide();
    }, i * 2000);
   })(i);
  }
};
//------This is the health regeneration code which isn't working right----//

$('button').click(function(){
  var lis = $(".health-bar ul li");
  for(var i=0; i<=lis.length; i++){
   $(lis[i]).show();
  };
});

healthDeplete();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="health-bar">
<ul>
    <li class="heart5"><img src="heart.png" alt="Smiley face"  width="60px"></li>
    <li class="heart4"><img src="heart.png" alt="Smiley face"  width="60px"></li>
    <li class="heart3"><img src="heart.png" alt="Smiley face"  width="60px"></li>
    <li class="heart2"><img src="heart.png" alt="Smiley face"  width="60px"></li>
    <li class="heart1"><img src="heart.png" alt="Smiley face"  width="60px"></li>
</ul>

<button>Click ME!!!</button>

如果您执行$("#health-screen .health-bar ul li").show();，则会显示所有li，然后无需循环播放。

function healthDeplete(){
  var lis = $(".health-bar ul li");
  for(var i=0; i<=lis.length; i++){
   (function(i) {
    setTimeout(function(){
     lis.eq(i).hide();
    }, i * 2000);
   })(i);
  }
};
//------This is the health regeneration code which isn't working right----//

$('button').click(function(){
  $(".health-bar ul li").slideDown();
});

healthDeplete();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="health-bar">
<ul>
    <li class="heart5"><img src="heart.png" alt="Smiley face"  width="60px"></li>
    <li class="heart4"><img src="heart.png" alt="Smiley face"  width="60px"></li>
    <li class="heart3"><img src="heart.png" alt="Smiley face"  width="60px"></li>
    <li class="heart2"><img src="heart.png" alt="Smiley face"  width="60px"></li>
    <li class="heart1"><img src="heart.png" alt="Smiley face"  width="60px"></li>
</ul>

<button>Click ME!!!</button>

希望这会对你有所帮助。

隐藏后如何显示列表项？

1 个答案: