Question

单击该按钮可更改HTML，但当我再次单击该按钮时，它只会重新加载已更改的HTML。我希望它再次将HTML更改为不同的东西（随机化）。

（我有一个名为'list'的JSON变量，带有一堆引号）

为什么每次按下按钮时都没有按下最后一个按钮？我认为这个功能基本上会重复。

使用Javascript：

var number = Math.floor(Math.random() * list.length);

$(document).ready(function() {
  $(".clickMe").on('click', function() {
   $("#quoteMsge").html(list[number].quote);  
   $("#author").html(list[number].by);
  });
});

HTML：

<h1> Generate your quote! </h1>
<div class="outer">
  <div class="inner">
    <h2 id="quoteMsge"><i class="fa fa-quote-left"></i>
Generate a quote!</h2>
    <h3 id="author">- Me</h3>
    <div class="button">
      <button class="btn btn-primary clickMe">Gimme a Quote!</button>
    </div>
  </div>
</div>

我已经在这几个小时，但我是一个菜鸟，所以请原谅我。我使用了setInterval函数，它确实有效，但看起来不对吗？那可行吗？

提前感谢任何建议。

Answer 1

试试这个

$(document).ready(function() {
  $(".clickMe").on('click', function() {
    var number = Math.floor(Math.random() * list.length);
    $("#quoteMsge").html(list[number].quote);  
    $("#author").html(list[number].by);
  });
});

Answer 2

您只生成一次随机数，因此每次点击时，都会添加相同的数字。

使用此代码：

var number = Math.floor(Math.random() * list.length);

$(document).ready(function() {
  $(".clickMe").on('click', function() {
   number = Math.floor(Math.random() * list.length);
   $("#quoteMsge").html(list[number].quote);  
   $("#author").html(list[number].by);
  });

});

以下是演示文稿的片段：

＆＃13;

var list = [{
  'quote': 'Quote 1',
  'by': 'Author 1',
}, {
  'quote': 'Quote 2',
  'by': 'Author 2',
}, {
  'quote': 'Quote 3',
  'by': 'Author 3',
}]

var number = Math.floor(Math.random() * list.length);

$(document).ready(function() {
  $(".clickMe").on('click', function() {
    number = Math.floor(Math.random() * list.length);
    $("#quoteMsge").html(list[number].quote);
    $("#author").html(list[number].by);
  });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" class="clickMe" value="Click Me">

<div>Message:
  <p id="quoteMsge" style="display:inline-block"></p>
</div>

<div>Author:
  <p id="author" style="display:inline-block"></p>
</div>

＆＃13;

Answer 3

您必须在事件函数中创建随机数：

$(document).ready(function() {
 $(".clickMe").on('click', function() {
   var number = Math.floor(Math.random() * list.length);
   $("#quoteMsge").html(list[number].quote);  
   $("#author").html(list[number].by);
 });
});

Jquery Click函数仅更改HTML一次

3 个答案: