Question

我正在尝试逐个动态创建li。这是我的代码。知道为什么这样的东西不起作用吗？

dplyr

$('form').submit(function(e) {
  e.preventDefault();
  var userInput = $('#inputNumber').val();
  console.log(outputResult);
  var modifiedResult = outputResult.map(function(item) {
    return '<li class="ball">' + item + '</li>'
  });
  $('.output').html(modifiedResult.join(""));
  $('.ball').each(function(i, e) {
    $(this).delay(i * 400).fadeIn();
  });
});

Answer 1

执行$('.output').html(modifiedResult.join(""));后，li已经显示{默认情况下display属性为block。

只需在使用style="display:none"函数创建的 html 字符串中添加#map()即可 - 请参阅下面的演示：

var userInput = $('#inputNumber').val();
var outputResult = [1,2,3,4,5];
var modifiedResult = outputResult.map(function(item) {
  return '<li style="display:none" class="ball">' + item + '</li>'
});
$('.output').html(modifiedResult.join(""));
$('.ball').each(function(i, e) {
  $(this).delay(i * 400).fadeIn();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="output"></ul>

Answer 2

如果您想在最初创建用户fadeIn之后display:none。

$('#submit').click(function(e) {
  e.preventDefault();
  var userInput = 5;
  var outputResult = [1, 2, 3, 4, 5];
  console.log(outputResult);
  var modifiedResult = outputResult.map(function(item) {
    return '<li style="display:none" class="ball">' + item + '</li>'
  });
  $('.output').html(modifiedResult.join(""));
  $('.ball').each(function(i, e) {
    debugger;
    $(this).delay(i * 400).fadeIn();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="output"></ul>

<input id="submit" type="button" value="submit" />

逐个显示动态创建的div

2 个答案: