JSBin Example

Question

我创建了一个程序，在屏幕上生成4个球，里面有一个数字。

当用户输入他想要生成的新圆圈的值并点击该按钮时，在前4个已生成的球下生成新的4个圆圈，其中包含数字。

然而，我现在想要的是，如果第二行中的球数与第一行中的球数匹配，那么球应该显示在该特定球下。但如果两个球数不匹配则无关紧要。

这是我的代码JSFiddle。 BTW JSFIDDLE没有正确显示结果......它没有显示任何关于点击按钮的结果，但是如果你用你的编程语言做的话。
该按钮实际上会为您生成球，但如果球数相同，则不会将它们放在包含该数字的第1行球下方的第2行。

＆＃13;

{{1}}

＆＃13;

{{1}}

＆＃13;

Answer 1

首先，您需要计算值是否相同，如果需要将Y设置为一个值，则将其设置为另一个值。然后，您可以使用此Y值不仅设置弧，还设置文本

var calcY = 0;
if( xar[i] === arr[i] )
{
   calcY = centerY;
}
else
{
   calcY = centerY + 100;
}

示例输出 - http://jsbin.com/hazozafuha

Answer 2

JSBin Example

逻辑解释：

从输入中获取数字;
找出与旧数字相同的数字;
构建一个“骨架”（constructed），将旧数组（arr）和新数组（filtered）组合在一起，将键保留在原来的位置不匹配empty / undefined;
现在检查构建 -skeleton和 xar -new;
将它们合并在一起，以便构建中的空键获取 dif 数组中的值;
将完整的构建的数组传递给您制作圈子的部分代码，并且中提琴已经整理好了。

JS Code代码段：

var filtered = xar.filter(function(number){
    return contains(arr, number);
  });

  arr.forEach(function(el, key) {
    filtered.forEach(function(cel,ckey){
      if (el === cel){
        constructed[key] = el;
      }
    })
  });

  var dif = difference(xar, constructed);

  for(var k=0; k<4; k++){
    var cval = constructed[k];
    if (cval === undefined){
      constructed[k] = dif[0];
      dif.shift();
    }
  }

我可能过于复杂了一些部分，但它确实有效。如果有人对如何改进这一点有一些建议，我很乐意看看。

Javascript / Html：匹配两个相同数字的圈子？

2 个答案:

JSBin Example

逻辑解释：

JS Code代码段：