jQuery random blockquote

问题

I've spent the past 2 hours looking for and testing various solutions to this problem but to little success so I'm resigned to asking for help.

I would like to build an array of quotes which each have citations and and a link, to be pulled at random. I don't need any thing more than for them to change upon page refresh.

However, I have some pretty tasty CSS to style blockquote and cite.

Here's some example HTML to illustrate how the content from the array would fit within a quote:

<blockquote>
  <p>A line of oversize watches that can offer many of the attributes of premium luxury watches at an affordable price.
  </p>
  <cite>&mdash; 
    <a href="http://www.horozima.com/2012/07/terranaut-xl-50mm.html" target="_blank">Horozima
    </a>
  </cite>
</blockquote>

The intended location for this code is a Big Cartel product (template) page with automatically generated content for each product. So, without some randomizing JS the same quote would be on every product page.

回答1:

Execute JavaScript on DOMReady to use the random() function to generate a random number. If you multiply this number by a value you will get a random number between 0 and the value (but not including the value itself). If you put the quotes into a JSON array, you can use the array's .length property for the value you multiply by since the number of items in the array is one larger than the index of the last item. This will generate a random number that is one of the indexes of the array.

After this, use jQuery's text() function to replace the text of the paragraph and citation tags to display the quote you randomly selected.

Here is an example: http://jsfiddle.net/sWvGp/

HTML:

<blockquote id="randomquote">
    <p></p> <cite>&mdash; <a href="#" target="_blank"></a></cite>
</blockquote>

Javascript:

var myQuotes = [{
    quote: "To err is human; to forgive, divine.",
    cite: "Alexander Pope",
    url: "http://www.example.com"
}, {
    quote: "Reports of my death have been greatly exaggerated.",
    cite: "Mark Twain",
    url: "http://www.example.com"
}, {
    quote: "A line of oversize watches that can offer many of the attributes of premium luxury watches at an affordable price.",
    cite: "Horozima",
    url: "http://www.horozima.com/2012/07/terranaut-xl-50mm.html"
}];

var randomQuote = Math.floor(Math.random() * myQuotes.length)

$('p', '#randomquote').text(myQuotes[randomQuote].quote);
$('cite a', '#randomquote').attr('href', myQuotes[randomQuote].url).text(myQuotes[randomQuote].cite);

回答2:

Depending on your strengths, you can do it "quick and dirty" or as a proper solution.

The proper solution would be to have server side some code that pulls a random row from a database, and renders it as above. Since your tags have nothing to do with it, I'll skip on to

the quick and dirty solution, which is to have a javascript array of quotes and links, and a random one shown:

$(document).ready(function() {
  var questions = [
      {q: 'This is question 1', l: 'http://this.is.link1', a: 'Test' },
      {q: 'This is question 2', l: 'http://this.is.link2' , a:'Another'}
  ];

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

  $('blockquote p').html(questions[i].q);
  $('blockquote a').attr('href', questions[i].l);
  $('blockquote a').html(questions[i].a);
});

You can see that live in a jsFiddle. It assumes only a single blockquote is present, but it can be easily extended. You can output a single quote in your HTML to make it look ok when JS is disabled.

来源：https://stackoverflow.com/questions/16657066/jquery-random-blockquote

标签

jquery

arrays

random

quotations

bigcartel