如何使用jQuery单击遍历数组？

Question

我有一组引号，当单击一个按钮时，我希望它随机淡出为新的引号。

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

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];
  });
});

Answer 1

您忘记添加$('#quoteDisplay').fadeIn('slow'); 在更改了元素的文本之后，也只有在文本完全淡出后才能更改文本，您应该将逻辑添加到单独的函数中，并将其作为回调添加到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); }); }); 

 <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> 

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时间很久以前，它只是指出方向：

$qd=$('#quoteDisplay')
$gd.fadeOut(complete: =>
    $qd.text(quotes[randomNumber])
    $gd.fadeIn()
)