如何使用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()
)