Question

我有一系列引号，当点击一个按钮时，我希望它随机淡出一个新的引号。

在下面的代码中，它不是淡出到数组中下一个随机选择的值，而是完全淡出，并且当您单击按钮时不会显示另一个值。

str

Answer 1

在您更改了元素的文本后，您忘记添加fadeOut，只有在文本完全淡出后才能更改文本，您应该将逻辑添加到单独的函数中并将其添加为var quotes = [ "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.", "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.", "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", ] $(document).ready(function() { function changeAndDisplayMessage() { var randomNumber = Math.floor(Math.random() * (quotes.length)); document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber]; $('#quoteDisplay').fadeIn(); } $('.btn').click(function() { $('#quoteDisplay').fadeOut('slow',changeAndDisplayMessage); }); });函数的回调我在下面添加了一个示例。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type='button' class='btn' value='Generate Random Message'> </input>
  <h4 id='quoteDisplay'> Message will show here </h4>
</div>

＆＃13;

innerHTML

＆＃13;

Answer 2

插入innerHTML后，您需要淡入qouteDisplay dom元素。

var quotes = [
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
"Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
 ]

$(document).ready(function() {
  $('.btn').click(function() {
    $('#quoteDisplay').fadeOut('slow');
    var randomNumber = Math.floor(Math.random() * (quotes.length));
    document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber];
    $('#quoteDisplay').fadeIn('slow');
  });
});

Answer 3

看看

所以你必须淡出，当完成放入新文本并再次淡入时：

编辑：示例是在咖啡脚本中，我的JavaScript时间很久以前，它只是指向方向：

{{1}}

如何使用jQuery循环访问数组？

3 个答案: