Question

我想使用jquery和一个多维数组来显示随机引用以及将其作为单独项目编写的个人的名称。然后，我将能够使用css以不同的方式设置它们。报价将在页面刷新时更改。

到目前为止，我有这个代码，它结合了引用和名称以及编写它的人：

$(document).ready(function(){
var myQuotes = new Array();
      myQuotes[0] = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in tortor mauris.  Peter Jones, Dragons Den";
      myQuotes[1] = "Curabitur interdum, nibh et fringilla facilisis, lacus ipsum pulvinar mauris, eu facilisis justo arcu eget diam. Duis id sagittis elit.  Theo Pathetis, Dragons Den";
      myQuotes[2] = "Vivamus purus purus, tincidunt et porttitor et, euismod sit amet urna. Etiam sollicitudin eros nec metus pretium scelerisque.  James Caan, Dragons Den";

            var myRandom = Math.floor(Math.random()*myQuotes.length); 
                $('.quote-holder blockquote span').html(myQuotes[myRandom]);
    });

任何帮助将不胜感激。

Answer 1

我会在这个例子中使用JSON，但你的代码非常接近。

$(document).ready(function(){
  var myQuotes = [{
    "author" : "Timothy Tailor",
    "quote" : "Trimodus offers brave, challenging training..."
  },
  {
    "author" : "Stanley Senoir",
    "quote" : "Trimodus is so very challenging..."
  },
  {
    "author" : "Jeremy Pacemaker",
    "quote" : "I would be confident in recommending..."
  }];

  var myRandom = Math.floor(Math.random()*myQuotes.length); 
  $('.quote-holder blockquote span.author').html(myQuotes[myRandom].author);
  $('.quote-holder blockquote span.quote').html(myQuotes[myRandom].quote);
});

Answer 2

将myQuotes数组更改为：

var myQuotes = [['Lorem ipsum', 'Peter Jones'],
                ['Lorem ipsum', 'Theo Pathetis'],
                ['Lorem ipsum', 'Duncan Bannantyne']];

Answer 3

怎么样：

$(document).ready(function(){
  var myQuotes = [
    {
      quote: "Lorem ipsum dolor sit amet...",
      by:    "Peter Jones, Dragons Den"
    },
    ... more quotes ...
  ];

  var r = Math.floor( Math.random() * myQuotes.length ); 
  $('.quote-holder blockquote')
    .find('span.quote').html( myQuotes[r].quote ).end()
    .find('span.by').html( myQuotes[r].by );
});

这假设标记为：

<div class='quote-holder'>
  <blockquote>
    <span class='quote'></span>
    <span class='by'></span>
  </blockquote>
</div>

Answer 4

尝试使用内联数组运算符：

$(document).ready(function(){
    var myQuotes = [];
    myQuotes[0] = [ "Lorem ipsum dolor sit amet.", "Author info" ] ;
    myQuotes[1] = [ "Lorem ipsum dolor sit amet.", "Author info" ] ;
    myQuotes[2] = [ "Lorem ipsum dolor sit amet.", "Author info" ] ;

    var idx = Math.floor(Math.random()*myQuotes.length);
    var quote = myQuotes[idx];
    $('.quote-holder blockquote span').html(quote[0]+" <span class='author'>"+ quote[1] +"</span>");
});

Answer 5

为什么不把这个人的名字放在这样的范围内：

myQuotes[0] = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in tortor mauris.  <span class="author">Peter Jones, Dragons Den</span>";

然后以不同的方式设置范围：

.quote-holder blockquote span{
//some style
}

.quote-holder blockquote span span.author{
//some other style
}

这可能是最简单的方法......

Answer 6

好的，到目前为止你的数组很简单（正如我所见），但是你想要以不同的方式设置作者的名字并引用它。我看到的懒惰解决方案是创建2个数组： 1有引号，1有作者，因此当你要显示时你会这样做：

  var myRandom = Math.floor(Math.random()*myQuotes.length); 
  $('span.quote').html(myQuotes[myRandom]);
  $('span.author').html(authors[myRandom]);

然后你定义2个css，1个用于.author，1个用于.quote

使用jquery创建多维数组

6 个答案: