Выберите случайные предметы из двух массивов и сопоставьте порядок предметов

Question

Этот код перемещается по трем массивам в случайном порядке всякий раз, когда нажимает div. Я хотел бы, чтобы два массива «кавычки» и «авторы» отображали один и тот же порядок случайных массивов. Я хотел бы, чтобы «Третий» равнялся «-Терней» и «Сначала» равным «-Первым» или кавычками [x] == authors [x], когда x является случайным.

Также есть простой способ комбинировать функцию .ready и .click, чтобы я не поставил точно такой же код в обоих случаях?

var colors = ["#3b609b", "#9b3b3b", "#3b9b81", "#7da5a4"]; 
var quotes = ["First", "Second", "Third", "Fourth"]; 
var authors = ["-First", "-Second", "-Third", "-Fourth"]; 

$(document).ready(function() { 
    //Variables to shuffle through "colors", "quotes" and "authors" arrays. 
    var rand = Math.floor(Math.random() * colors.length); 
    var rand2 = Math.floor(Math.random() * quotes.length); 
    var rand3 = Math.floor(Math.random() * authors.length); 
    //Display quotes/authors and change background colors. 
    $("body, .button, .social").css("background-color", colors[rand]); 
    $(".quote").html(quotes[rand2]).css("color", colors[rand]); 
    $(".author").html(authors[rand3]).css("color", colors[rand]); 

    $(".button").click(function() { 
    //Variables to shuffle through "colors", "quotes" and "authors" arrays. 
    var rand = Math.floor(Math.random() * colors.length); 
    var rand2 = Math.floor(Math.random() * quotes.length); 
    var rand3 = Math.floor(Math.random() * authors.length); 
    //Display quotes/authors and change background colors when div is clicked. 
    $("body, .button, .social").css("background-color", colors[rand]); 
    $(".quote").html(quotes[rand2]).css("color", colors[rand]); 
    $(".author").html(authors[rand3]).css("color", colors[rand]); 
    }); 
}); 

Answer 1

Используйте объект, который содержит все содержимое для каждой цитаты, а затем вы просто выбираете объект в случайном порядке и все элементы этого объекта доступны. Это предотвращает многоуровневые массивы и делает его более чистой структурой кода и упрощает обслуживание и обновление.

Не то, чтобы я сократил вашу функцию - как только вы получите случайный объект, вы можете манипулировать своими другими элементами свойствами объектов. Я также предлагаю использовать классы с цветами и добавлять или удалять класс для достижения изменения цвета css - его очиститель, чтобы добавить класс к цвету элемента, а не изменять с помощью встроенного CSS.

var quotes = [ 
 
    {color: "#3b609b", quote: "First", author: "-First"}, 
 
    {color: "#9b3b3b", quote: "Second", author: "-Second"}, 
 
    {color: "#3b9b81", quote: "Third", author: "-Third"}, 
 
    {color: "#7da5a4", quote: "Fourth", author: "-Fourth"} 
 
]; 
 

 

 
$(document).ready(function() { 
 
    $('#clickMe').click(function(){ 
 
    var randomQuote = quotes[Math.floor(Math.random() * quotes.length)]; 
 
    $('#color').text('Color: ' + randomQuote.color); 
 
    $('#quote').text('Quote: ' + randomQuote.quote); 
 
    $('#author').text('Author: ' + randomQuote.author); 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button" id="clickMe">Click for a random quote</button> 
 
<p id ="color"></p> 
 
<p id ="quote"></p> 
 
<p id ="author"></p>

Answer 2

Вы можете вытащить эту логику в другую функцию, например, так!

var colors = ["#3b609b", "#9b3b3b", "#3b9b81", "#7da5a4"]; 
var quotes = ["First", "Second", "Third", "Fourth"]; 
var authors = ["-First", "-Second", "-Third", "-Fourth"]; 

function handle() { 
    //Variables to shuffle through "colors", "quotes" and "authors" arrays. 
    var rand = Math.floor(Math.random() * colors.length); 
    var rand2 = Math.floor(Math.random() * quotes.length); 
    var rand3 = Math.floor(Math.random() * authors.length); 
    //Display quotes/authors and change background colors when div is clicked. 
    $("body, .button, .social").css("background-color", colors[rand]); 
    $(".quote").html(quotes[rand2]).css("color", colors[rand]); 
    $(".author").html(authors[rand3]).css("color", colors[rand]); 
} 

$(document).ready(function() { 
    handle() 
    $(".button").click(handle); 
});