javascript - 让 jQuery .click() 激活不止一次

Question

我正在使用报价机，点击它会显示随机报价之一，它是在我的数组中找到的作者。我可以让它显示一次随机报价，但再次单击该按钮没有任何反应。

//VARIABLES
///////////////
var quotes = [
  ["Quote 1", "Author 1"],
  ["Quote 2", "Author 2"],
  ["Quote 3", "Author 3"],
  ["Quote 4", "Author 4"]
];

var randomQuote = quotes[Math.floor(Math.random() * quotes.length)];


//FUNCTIONS
///////////////
function quoteGeneration() {
  $(".quotes").replaceWith(randomQuote);
};


//QUOTE BUTTON
/////////////////
$(".quote-button").click(function() {
  quoteGeneration();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="quote-box">
  <h1>Random Quote Generator</h1>
  <p class="quotes">This is where the quotes go.</p>
  <span class="quote-authors">Quote author</span>

  <div class="social-media">
    <a href="#"><i class="fa fa-twitter"></i></a>
    <a href="#"><i class="fa fa-tumblr"></i></a>
  </div>

  <button class="quote-button">New Quote</button>
</div>

Answer 1

有两个主要问题。第一个是因为您在第一次点击时从 DOM 中删除了 .quotes 元素。使用 text() 而不是 replaceWith():

$(".quotes").text(randomQuote);

第二个是你的逻辑有缺陷，因为你只在加载页面时随机选择了一次引用。这应该在点击处理程序中完成。试试这个:

var quotes = [
  ["Quote 1", "Author 1"],
  ["Quote 2", "Author 2"],
  ["Quote 3", "Author 3"],
  ["Quote 4", "Author 4"]
];

$(".quote-button").click(function() {
  var randomQuote = quotes[Math.floor(Math.random() * quotes.length)];
  $(".quotes").text(randomQuote);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="quote-box">
  <h1>Random Quote Generator</h1>
  <p class="quotes">This is where the quotes go.</p>
  <span class="quote-authors">Quote author</span>

  <div class="social-media">
    <a href="#"><i class="fa fa-twitter"></i></a>
    <a href="#"><i class="fa fa-tumblr"></i></a>
  </div>

  <button class="quote-button">New Quote</button>
</div>