Question

每当div点击时，此代码以随机顺序随机排列三个数组。我想要让两个数组“引号”和“作者”显示相同的随机数组顺序。当x是随机的时候，我希望“Third”等于“-Third”和“First”等于“-First”或引用[x] == authors [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

您可以将该逻辑拉出到另一个函数中！

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

使用包含每个引用的所有内容的对象，然后您只需随机选择一个对象，即可访问该对象的所有元素。这可以防止多个数组，使其更简洁，更易于维护和更新。

并非我删除了您的功能 - 一旦获得随机对象 - 您就可以使用对象属性操纵其他元素。我还建议使用带有颜色的类，并添加或删除类以实现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>

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

2 个答案: