多次激活 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>

Answer 2

您的问题与点击无关。 您的问题是您生成一次随机数并阅读一次引号。

在方法内移动随机数/引用选择。 此外，您正在替换元素，而不是里面的文本。

 //VARIABLES /////////////// var quotes = [["Quote 1", "Author 1"], ["Quote 2", "Author 2"], ["Quote 3", "Author 3"], ["Quote 4", "Author 4"]]; //FUNCTIONS /////////////// function quoteGeneration() { var randomQuote = quotes[Math.floor(Math.random() * quotes.length )]; $(".quotes").text(randomQuote); }; //QUOTE BUTTON ///////////////// $(".quote-button").click( function() { quoteGeneration(); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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 3

将您的变量randomQuote移动到一个函数中，以便每次调用 click 事件时它都会获得随机报价截至目前， randomQuote仅在初始加载时设置一次，因此该值不会更改并使用html而不是replaceWith()

 //VARIABLES /////////////// var quotes = [["Quote 1", "Author 1"], ["Quote 2", "Author 2"], ["Quote 3", "Author 3"], ["Quote 4", "Author 4"]]; //FUNCTIONS /////////////// function quoteGeneration() { var randomQuote = quotes[Math.floor(Math.random() * quotes.length )]; $(".quotes").html(randomQuote); }; //QUOTE BUTTON ///////////////// $(".quote-button").click( function() { quoteGeneration(); });

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