如何用剪接法删除数组
如何用剪接法删除数组
提问于 2021-07-14 19:58:04
我创建了(3)列表。我想做的是：
-When复选框被选中，将值推入mainArray (我已经开始工作)
-When复选框未选中，从mainArray中删除值。
例如:如果未选中输入A，则从mainArray中删除6、7、8、9、10。
这里的任何帮助或输入都将不胜感激！干杯。
const a = document.querySelector('.input-1')
const b = document.querySelector('.input-2')
const c = document.querySelector('.input-3')
const list = [1, 2, 3, 4, 5];
const list2 = [6, 7, 8, 9, 10];
const list3 = [11, 12, 13, 14, 15];
const mainArray = [];
a.addEventListener('change', function(e) {
if (a.checked) {
mainArray.push(list)
console.log(mainArray)
}
else if (!a.checked) {
let index = mainArray.indexOf(list)
if (index != -1) {
mainArray.splice(index)
console.log(mainArray)
}
}
});
b.addEventListener('change', function(e) {
if (b.checked) {
mainArray.push(list2)
console.log(mainArray)
}
else if (!b.checked) {
let index = mainArray.indexOf(list2)
if (index != -1) {
mainArray.splice(index)
console.log(mainArray)
}
}
})
c.addEventListener('change', function(e) {
if (c.checked) {
mainArray.push(list3)
console.log(mainArray)
}
else if (!c.checked) {
let index = mainArray.indexOf(list3)
if (index != -1) {
list3.splice(index)
console.log(mainArray)
}
}
})<input class="input-1" type="checkbox"
value = "a"> A
<input class="input-2" type="checkbox"
value = "b"> B
<input class="input-3" type="checkbox"
value = "c"> C
如能在此提供任何帮助或投入，将不胜感激。
回答 5
Stack Overflow用户
回答已采纳
发布于 2021-07-19 16:53:00
您只需要删除一个，所以请确保通过第二个param。
mainArray.splice(index, 1);您还可以通过访问字母索引处的列表(例如a= 0，b= 1，c= 2等)来使其更通用.通过将字符代码规范化为索引。
全例
const mainArray = [];
const lists = [
[1, 2, 3, 4, 5],
[6, 7, 8, 9, 10],
[11, 12, 13, 14, 15]
];
const handleClick = (e) => {
const input = e.target;
const listIndex = input.value.charCodeAt(0) - 97;
const foundList = lists[listIndex];
if (input.checked) {
mainArray.push(foundList);
} else {
let index = mainArray.indexOf(foundList);
if (index !== -1) {
mainArray.splice(index, 1);
}
}
console.log(JSON.stringify(mainArray));
};
document.querySelectorAll('.list')
.forEach(el => el.addEventListener('input', handleClick));<input class="list" type="checkbox" value="a"> A
<input class="list" type="checkbox" value="b"> B
<input class="list" type="checkbox" value="c"> C
实现这一目标的一个更好的方法是使邮件列表可变，只需替换值即可。更新值时，只需查看当前的选择并减少列表。
let mainList = []; // Make this mutable...
const subLists = [
[1, 2, 3, 4, 5],
[6, 7, 8, 9, 10],
[11, 12, 13, 14, 15]
];
const syncChoices = (inputs, lists) =>
[...inputs].reduce((acc, { checked }, index) =>
checked ? [...acc, ...lists[index]] : acc, []);
const handleClick = (e) => {
mainList = syncChoices(document.querySelectorAll('.list'), subLists); // Set
console.log(JSON.stringify(mainList)); // Print the list
};
document.querySelectorAll('.list')
.forEach(el => el.addEventListener('input', handleClick));.as-console-wrapper { max-height: 4em !important; }<input type="checkbox" class="list" data-index="0"> A
<input type="checkbox" class="list" data-index="1"> B
<input type="checkbox" class="list" data-index="2"> C
Stack Overflow用户
发布于 2021-07-14 21:14:14
快速而肮脏的方式来完成同样的事情。每次单击复选框时，它都会从头开始重新计算mainArray，使用当前选中的复选框及其data-list属性来构建它。
[...document.querySelectorAll(".listy")].forEach(input => {
input.addEventListener('change', (e) => {
const mainArray = [...document.querySelectorAll(".listy:checked")].flatMap(el => JSON.parse(el.dataset.list));
console.log(mainArray);
});
});<input class="listy" type="checkbox"
value = "a" data-list="[1,2,3,4,5]"> A
<input class="listy" type="checkbox"
value = "b" data-list="[6,7,8,9,10]"> B
<input class="listy" type="checkbox"
value = "c" data-list="[11,12,13,14,15]"> C
Stack Overflow用户
发布于 2021-07-14 20:06:41
您应该引用mainArray而不是list。
const a = document.querySelector('.input-1')
const b = document.querySelector('.input-2')
const c = document.querySelector('.input-3')
const list = [1, 2, 3, 4, 5];
const list2 = [6, 7, 8, 9, 10];
const list3 = [11, 12, 13, 14, 15];
const mainArray = [];
a.addEventListener('change', function(e) {
if (a.checked) {
mainArray.push(list)
console.log(mainArray)
}
else if (!a.checked) {
let index = mainArray.indexOf(list)
if (index != -1) {
mainArray.splice(index)
console.log(mainArray)
}
}
});
b.addEventListener('change', function(e) {
if (b.checked) {
mainArray.push(list2)
console.log(mainArray)
}
else if (!b.checked) {
let index = mainArray.indexOf(list2)
if (index != -1) {
mainArray.splice(index)
console.log(mainArray)
}
}
})
c.addEventListener('change', function(e) {
if (c.checked) {
mainArray.push(list3)
console.log(mainArray)
}
else if (!c.checked) {
let index = mainArray.indexOf(list3)
if (index != -1) {
mainArray.splice(index)
console.log(mainArray)
}
}
})<input class="input-1" type="checkbox"
value = "a"> A
<input class="input-2" type="checkbox"
value = "b"> B
<input class="input-3" type="checkbox"
value = "c"> C
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68384365
复制相关文章
相似问题
腾讯云开发者
