Question

我需要此函数在可变数量的div上运行并为每个div返回唯一的结果。

class Sentence {
    constructor(na, num, col) {
        this.name = na;
        this.number = num;
        this.color = col;
    }

    makesentence() {
        $('div').html(this.name + " is " + this.number + " years old and loves " + this.color);
    }
}



var names = ['zach', 'kelly', 'lisa', 'slater'],
    name = names[Math.floor(Math.random() * names.length)],
    colors = ['red', 'orange', 'blue', 'magenta'],
    color = colors[Math.floor(Math.random() * colors.length)],
    number = Math.floor((Math.random() * 95) + 1);



var newsentence = new Sentence(name, number, color);
newsentence.makesentence();

因此，如果我的HTML是3个空div：

<div></div>
<div></div>
<div></div>

我希望它返回以下内容：
丽莎今年67岁，喜欢红色
扎克今年56岁，喜欢洋红色
凯莉（27岁），喜欢橘子

但是现在它只返回类似的内容：
丽莎今年67岁，喜欢红色
丽莎今年67岁，喜欢红色
丽莎今年67岁，喜欢红色

Answer 1

如果我正确理解了您的问题，则可以通过围绕文档中<div>元素的迭代重新编码代码来轻松实现此目的。

作为保证每个div唯一结果的策略，您可以像这样对输入数据进行混洗：

 names = names.sort(function() { return Math.random() - 0.5; });
 colors = colors.sort(function() { return Math.random() - 0.5; });
 ages = ages.sort(function() { return Math.random() - 0.5; });

然后遍历每个<div>，以这种方式通过每个元素的index依次填充每个内容：

$('div').each(function(index) {

  var name = names[index];
  var color = colors[index];
  var number = ages[index];

  $(this).html(name + " is " + number + " years old and loves " + color);
});

这里的想法是首先对输入数据进行混洗（即获得随机结果），然后在生成句子时对数据进行有序访问，以确保最终结果中句子之间的唯一性。

这是一个有效的代码段，展示了两个实际的想法：

// Declare input data to be used for sentense generation. 
// Also declare age data array
var names = ['zach', 'kelly', 'lisa', 'slater'];
var colors = ['red', 'orange', 'blue', 'magenta'];
var ages = new Array(100).fill(0).map((value, index) => index + 1);

// Shuffle the input data to yield a randomized result
names = names.sort(function() { return Math.random() - 0.5; });
colors = colors.sort(function() { return Math.random() - 0.5; });
ages = ages.sort(function() { return Math.random() - 0.5; });

// Iterate over each div in the document
$('div').each(function(index) {
  
  // Get data from each array by current div's index
  var name = names[index];
  var color = colors[index];
  var number = ages[index];
  
  // For the current div, update the html content as before
  $(this).html(name + " is " + number + " years old and loves " + color);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div></div>
<div></div>
<div></div>

Answer 2

我想知道为什么当通过每个div的简单每个循环都可以完成工作时，答案必须如此复杂。

$.each($(".div"), function(){
  var names = ['zach', 'kelly', 'lisa', 'slater'],
  name = names[Math.floor(Math.random() * names.length)],
  colors = ['red', 'orange', 'blue', 'magenta'],
  color = colors[Math.floor(Math.random() * colors.length)],
  number = Math.floor((Math.random() * 95) + 1);

  var newsentence = new Sentence(name, number, color);

  $(this).html(newsentence.makesentence());
});

如果您希望结果像您提到的那样更加独特，则可以添加条件。

Javascript-使函数为每个div返回唯一的结果

2 个答案: