Question

我正在使用一个引用机器，当点击它时会显示一个随机引号，并且它的作者在我的数组中找到了。我可以让它显示一次随机引用，但再次点击该按钮什么都不做。

HTML

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

Javascript

//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();
});

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

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

移动方法内的随机数/引号选择。你也在替换元素，而不是里面的文本。

＆＃13;

//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();
});

＆＃13;

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

＆＃13;

Answer 3

将变量randomQuote移动到函数内部，以便每次调用click事件时它都会获得随机引用截至目前randomQuote仅在初始加载时设置了一次，因此值不会变为chnage使用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>

获取jQuery .click（）不止一次激活

3 个答案: