从两个数组中选择随机项目并匹配项目顺序

Question

This code shuffles through the three arrays at random order whenever the div clicked. I would like to have to have the two arrays "quotes" and "authors" display the same random array order. I would like "Third" to equal "-Third" and "First" to equal "-First" or quotes[x]==authors[x] when x is random.

Also is there a simple way to combine the .ready and .click function so I don't have put the exact same code in both?

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

You can pull out that logic into another function like so!

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

Answer 2

Use an object which contains all content for each quote and then you simply select an object at random and all elements of that object are accessible. This prevents the muliple arrays and makes it a cleaner code structure and easier to maintain and update.

Not that I have abridged your function - once you get the random object - you can then manipulate your other elements with the objects properties. I would also suggest using classes with the colors and either adding or removing the class to achieve the css color change - its cleaner to add class to color an element than to change with inline 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>