jQuery随机块引用

Question

我花了两个小时寻找并测试了这个问题的各种解决方案，但收效甚微，所以我只好寻求帮助了。

我想建立一个引用数组，每个引用都有引用和链接，随机抽取。我不需要更多的东西，只是让他们在页面刷新时改变。

然而，我有一些非常美味的CSS样式blockquote和引用。

下面是一些HTML示例，说明如何将数组中的内容放入引号中:

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

此代码的预期位置是一个Big Cartel产品(模板)页面，其中为每个产品自动生成内容。因此，如果没有一些随机的JS，相同的报价将出现在每个产品页面上。

Answer 1

根据你的优势，你可以"快速和肮脏"或作为适当的解决方案。

正确的解决方案是让服务器端一些代码从数据库中提取随机行，并如上所述呈现它。因为你的标签与它无关，所以我将直接跳到

的快速和肮脏的解决方案，这是有一个javascript数组的引号和链接，并显示一个随机的:

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

你可以在jsFiddle中看到。它假设只有一个blockquote存在，但它可以很容易地扩展。当JS被禁用时，你可以在HTML中输出一个单引号，使它看起来正常。

Answer 2

在DOMReady上执行JavaScript，使用random()函数生成随机数。如果您将这个数字乘以一个值，您将得到一个介于0和该值之间的随机数(但不包括该值本身)。如果将引号放入JSON数组中，则可以使用数组的.length属性来表示所乘的值，因为数组中的项数比最后一项的索引大1。这将生成一个随机数，作为数组的索引之一。

在此之后，使用jQuery的text()函数来替换段落和引文标签的文本，以显示您随机选择的引用。

下面是一个例子: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);