Question

我有2个变量，可将两个不同复选框输入系列的值提取到Nodelists（这些是用户选择的颜色）中，而一个数组则包含所有可用颜色的主列表：

Color1elementsList = document.querySelectorAll("#question5 input:checked");
Color2elementsList = document.querySelectorAll("#question10 input:checked");    
var elements = ["red", "blue", "green", "yellow", "black"];

想法是找出尚未从Color1elementsList和Color2elementsList之间选择主列表中的哪些颜色，并将它们存储到另一个数组：ColorelementsLeft中。

我的努力：

function checkColors(){
    var Color1ArrayElements = []; // empty Array
    var Color2ArrayElements = []; // empty Array
    var ColorelementsLeft = []; // empty Array

//convert nodelist to array
    for (var i = 0; i < Color1elementsList.length; i++) {
        var self = Color1elementsList[i].value;
        Color1ArrayElements.push(self);
    }

//convert nodelist to array
    for (var i = 0; i < Color2elementsList.length; i++) {
        var self = Color2elementsList[i].value;
        Color2ArrayElements.push(self);
    }

    ColorelementsLeft = elements - Color1ArrayElements - Color2ArrayElements;   
    console.log(ColorelementsLeft);
}

很明显，ColorelementsLeft的公式不正确，但是我不确定从哪里开始。

假设用户在第一个输入列表中选择红色和蓝色，然后在第二个输入列表中选择红色和黄色，ColorelementsLeft应该包含绿色和黑色。

Answer 1

const colors1 = [...document.querySelectorAll("#question5 input:checked")];
const colors2 = [...document.querySelectorAll("#question10 input:checked")];    
const elements = ["red", "blue", "green", "yellow", "black"];

const colorsYetToBePicked = elements.filter(el => !colors1.concat(colors2).includes(el));

因此，[...]主要通过使用传播语法在这里发生了几件事，我们可以快速将Nodelist转换为数组。

在第二部分中，我们调用函数filter并将过滤设置为排除元素（如果该元素已在任一颜色列表中）。

Answer 2

首先，我将定义一个函数，该函数返回与给定选择器匹配的所有复选框的值：

async

然后，我将使用一个选择器，该选择器可以一次性获取所有选中的复选框。 为此，我假设所有需要处理的复选框都使用相同的命名模式。

给出此HTML：

await

然后，以下选择器可以提取名称以“ set”开头的所有选中的复选框：（请注意选择器中使用.then：

const values = selector =>
  Array.from(document.querySelectorAll(selector))
    .map(({value}) => value);

那么剩下要做的就是构造所有可能颜色的列表，并仅保留尚未选择的颜色。

下面的完整代码：

<input type="checkbox" name="set1" value="red" checked/> red
<input type="checkbox" name="set1" value="blue" checked/> blue
<input type="checkbox" name="set2" value="red" checked/> red
<input type="checkbox" name="set2" value="yellow" checked/> yellow

比较2个节点列表和1个数组之间的差异

2 个答案: