我有一个事件监听器,每次单击图像时都会向数组中添加一个新项。如何检查新添加到数组的项是否与另一个数组中的项匹配?
let a = ['a', 'b', 'c', 'd']
let b = []
grid.addEventListner('click', (e) =>{
let clicked = e.target
b.push(clicked)
// Here is where I want to check if the variable "clicked"
// which is pushed in to the b array matches
// the value on the same position in the a array. So for
// every click if its right I add a // green class and if
// its not I add a red class and finish the possibility
// to play.
})
希望我能够解释这个问题:(
如果我理解正确,你想检查b中的新项目是否等于a中相同位置的项目。你可以这样做:
if (a[b.length - 1] === clicked) {
//set green
} else {
//set red
}
如果在检查时单击的内容超出范围,则可以将clicked
替换为b[b.length - 1]
。
如果您想查看a
中的任何项目是否与b
中的clicked
新项目匹配,可以使用array.fund方法。
if(a.find( el => el === clicked)) {
// set green
} else {
// set red
}
根据代码中注释的位置,您似乎希望此逻辑在该函数中运行。这就是为什么我在这里添加了一个简单的if块
您可以使用Array.find
来检查某些Array
中是否存在元素。一个例子:
const someArray = ['a', 'b', 'c', 'd'];
const newElem = 'a';
const newElem2 = 'hello';
console.log(someArray.find(elem => elem === newElem)
? `${newElem} exists!` : `${newElem} is new!`);
if (!someArray.find(elem => elem === newElem2)) {
someArray.push(newElem2);
}
console.log(JSON.stringify(someArray));
您不需要另一个数组来记录点击的有效性;只是一个柜台。
const buttonWrapper = document.getElementById('button_wrapper');
const a = ['a', 'b', 'c', 'd'].map(l => document.getElementById(`button_${l}`));
let counter = 0;
buttonWrapper.addEventListener('click', e => {
if (e.target.tagName === "BUTTON") {
if (e.target === a[counter]) {
buttonWrapper.classList.remove('red')
buttonWrapper.classList.add('green');
counter = (counter + 1) % a.length;
} else {
buttonWrapper.classList.remove('green')
buttonWrapper.classList.add('red');
counter = 0;
}
}
});
#button_wrapper { display: table; padding: 10px; border: 4px solid #000; }
#button_wrapper.red { border-color: red; }
#button_wrapper.green { border-color: green; }
<div id="button_wrapper">
<button id="button_a">Button A</button>
<button id="button_b">Button B</button>
<button id="button_c">Button C</button>
<button id="button_d">Button D</button>
</div>