Использование jquery для создания многомерного массива

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 для. автор и 1 для .quote