Jquery 创建在单击时显示不同内容的按钮

我是Jquery和web开发的新手，我正在尝试构建一个随机报价生成器

该web应用程序由一个按钮组成，单击该按钮可显示新报价。这是一个静态站点，所有这些都是用html/css/jquery完成的

我的问题是，当单击按钮时，它会显示第一个报价，但当再次单击时，它不会更改。我希望按钮在每次单击时都显示一个新报价

我相信这对于任何精通Jquery的人来说都是一个简单的解决方案：

  $(document).ready(function() {
  $(".quote-button").click(function() {
    $('#quote-box p').html(quotes[i].q);
    $('#quote-box a').attr('href', quotes[i].l);
    $('quote-box a').html(quotes[i].a);
  });
});

var quotes = [{
    q: 'The Great Man … is colder, harder, less hesitating, and without respect and  without the fear of “opinion”; he lacks the virtues that accompany respect and “respectability”, and altogether everything that is the “virtue of the herd”. If he cannot lead, he goes alone. … He knows he is incommunicable: he finds it tasteless to be familiar. … When not speaking to himself, he wears a mask. There is a solitude within him that is inaccessible to praise or blame. - Friedrich Nietzche, The Will to Power'
  }, {
    q: 'Power is given only to those who dare to lower themselves and pick it up. Only one thing matters, one thing; to be able to dare! Fyodor Dostoevsky'
  }, {
    p: 'The more sand has escaped from the hourglass of our life, the clearer we should see through it. Niccolo Machiavelli'
  }

];

var i = Math.floor((Math.random() * quotes.length));

---

问题是，在运行时，变量

i

被声明为一个特定的随机数，因此再次单击它将显示完全相同的引号（因为

i

不会更改）

---

Put

var i=Math.floor（（Math.random（）*quotes.length））.click（）

事件处理程序中的code>。

问题是，在运行时，变量

i

被声明为一个特定的随机数，因此再次单击它将显示完全相同的引号（因为

i

不会更改）

---

Put

var i=Math.floor（（Math.random（）*quotes.length））.click（）

事件处理程序中执行code>。

问题在于生成的随机数可能等于先前生成的随机数，因此不会反映出来。因此，您可以检查以前的随机数是否不等于新的随机数，否则将生成一个新的随机数。您可以使用以下代码：

var new_random, old_random;
function random_num(){
    return Math.floor((Math.random() * quotes.length));
}    

$(document).ready(function() {
   $(".quote-button").click(function() {
        new_random = random_num(); //Generate a random number
        while(new_random == old_random){ // Check if previous and new are equal
            new_random = random_num();//if equal generate another
        }
        $('#quote-box p').html(quotes[new_random].q);
        $('#quote-box a').attr('href', quotes[new_random].l);
        $('quote-box a').html(quotes[new_random].a);
        old_random = new_random;
    });
});

---

问题是您生成的随机数可能与以前生成的随机数相等，因此不会得到反映。因此，您可以检查以前的随机数是否不等于新的随机数，否则将生成一个新的随机数。您可以使用以下代码：

var new_random, old_random;
function random_num(){
    return Math.floor((Math.random() * quotes.length));
}    

$(document).ready(function() {
   $(".quote-button").click(function() {
        new_random = random_num(); //Generate a random number
        while(new_random == old_random){ // Check if previous and new are equal
            new_random = random_num();//if equal generate another
        }
        $('#quote-box p').html(quotes[new_random].q);
        $('#quote-box a').attr('href', quotes[new_random].l);
        $('quote-box a').html(quotes[new_random].a);
        old_random = new_random;
    });
});