CODEWITHSUNDEEP
jquery
Simon M White
Simon M White

Reputation: 1

Use jquery to create a multidimensional array

I'd like to use jquery and a multidemensional array to show a random quote plus the name of the individual who wrote it as a separate item. I'll then be able to use css to style them differently. The quote will change upon page refresh.

So far i have this code which combines the quote and the name and person who wrote it:

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

any help would be greatly appreciated.

Upvotes: -1

Views: 4771

Answers (6)

Skilldrick
Skilldrick

Reputation: 70819

Change your myQuotes array to this:

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

Upvotes: 0

Fabiano Soriani
Fabiano Soriani

Reputation: 8562

Ok, so far your array is plain (as I see), but you want to style differently the author's name and it quote. The lazy solution i see is to create 2 arrays: 1 has the quotes, 1 has the authors, so when you are going to display you do this: 

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

And then you define 2 css, 1 for .author and 1 for .quote

Upvotes: 0

Peter
Peter

Reputation: 767

Why don't you just put the name of the person inside a span like so:

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

Then just style the span differently:

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

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

This would probably be the easiest way...

Upvotes: 0

Joe Mastey
Joe Mastey

Reputation: 27099

Try using the inline array operator:

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

Upvotes: 0

Blaise
Blaise

Reputation: 132

I would go with using JSON for this example, your code is pretty close though.

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

Upvotes: 3

rfunduk
rfunduk

Reputation: 30432

How about:

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

This is assuming markup like:

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

Upvotes: 0

Related Questions