如何从数组中按特定顺序显示文本

Question

我有一个html页面分为两个部分（左+右），我需要按照定义的顺序从列表中每次显示两个单词（每个部分一个）。 现在我只能这样随机显示：

$(document).ready(function() {
var quotes = new Array("pizza", "cake", "coke");
var randno = Math.floor(Math.random()*(quotes.length));
$('.cosa1').append(quotes[randno]);
console.log(randno);

var quotes = new Array("burger", "muffin", "pepsi");
var randno = Math.floor(Math.random()*(quotes.length));
$('.cosa2').append(quotes[randno]);
console.log(randno);
});

我正在尝试用汉堡披萨，松饼蛋糕，百事可乐等等。

我的Html看起来像这样：

<div class="main-container">
<div class="left-container">
  <div>
    <h1 class="cosa1"></h1>
  </div>
</div>
<div class="right-container">
  <div>
    <h1 class="cosa2"></h1>
  </div>
</div>

有什么想法吗？

Answer 1

对于代码的外观，您使用的是jQuery，所以让我们继续吧。

首先，您需要封装代码并实现我们使用多元素选择器：

// Initialize the constants (not literally because you really can't in JS).
var quotes = new Array('1', '2', '3');
var cosas = $('.cosa1, .cosa2');

// Then having control over all the elements you want to mannipulate
// just iterate through all of them and apply your @quotes math logic.
cosas.each(function(i, cosa){
    var randno = Math.floor(Math.random()*(quotes.length));
    $(cosa).append(quotes[randno]);
});

现在基本上我上面做的是：

• 存储多个可变元素。
• 迭代这些元素并在数组中附加一个数字。

您可以在此处查看工作测试： https://jsfiddle.net/5vez6yb6/

<强>更新 的 HTML ：

<div class="main-container">
<div class="left-container">
  <div>
    <h1 class="cosa1">Postres / </h1>
  </div>
</div>
<div class="right-container">
  <div>
    <h1 class="cosa2">Hamburguesa / </h1>
  </div>
</div>

<强> JS ：

// Initialize the constants (not literally because you really can't in JS).
var quotes = new Array('Perro', 'Pizza', 'Hamburguesa', 'Plátano', 'Postres');
var cosas = $('.cosa1, .cosa2');

var getRandomNumber = function()
{
    return Math.floor(Math.random()*(quotes.length));
}

// Then having control over all the elements you want to mannipulate
// just iterate through all of them and apply your @quotes math logic.
cosas.each(function(i, cosa){
    cosa = $(cosa);
    var found = false;
    var cosa_text = cosa.html();

    while (!found)
    {
      var randno = getRandomNumber();

      if (!cosa_text.includes(quotes[randno]))
      {
            cosa.append(quotes[randno]);

            found = true;
      }
    }
});

所以基本上我在循环内部迭代以找到你要附加的文本而不复制它。

逻辑： 虽然（Haven找不到这个词） ---得到一个单词并检查它是否在元素中。 ---如果它不在元素中，请附加单词并退出while循环。

工作示例：https://jsfiddle.net/5vez6yb6/3/

Answer 2

随机数在每个内部声明，这有可能导致2个不同的数字，使其难以匹配。最好在each之前确定随机数。

为了保持匹配，当然可以使用2个数组，但是你必须根据索引确定数组。在下面的例子中，我合并了2个数组（也可以用对象数组来完成）。

这种方式quotes[randno]返回一个随机数组，引号[randno] [i]返回子数组中的单词。

$( function(){//causes the code to be executed on document load, otherwise the 'cosa' elements won't be found (since your code is executed in the header portion of your site)
var quotes = [["pizza","burger"], ["cake","muffin"], ["coke","pepsi"]];

var randno = Math.floor(Math.random()*(quotes.length)); //declare outside of the each to keep a single number
var cosas = $('.cosa1, .cosa2').each(function(i, cosa){    
    $(cosa).append(quotes[randno][i]); 
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-container">
<div class="left-container">
  <div>
    <h1 class="cosa1"></h1>
  </div>
</div>
<div class="right-container">
  <div>
    <h1 class="cosa2"></h1>
  </div>
</div>