[英]How to revert event to its original state after clicking on it again?
I'm relatively new to web-development and I am building a portfolio website.我对网络开发比较陌生,我正在建立一个投资组合网站。 I have these triangle bullet points I made using borders.我有这些使用边框制作的三角形要点。 Originally, they are pointing to the right and the idea is to be able to click on them and then have them point down (like an arrow) to then show some image (haven't gotten to that part yet) and then point back to the right when clicked again.最初,它们指向右侧,想法是能够单击它们,然后让它们指向下方(如箭头),然后显示一些图像(尚未到达该部分),然后再指向再次单击时的右侧。 I can get them to point down, but I tried implementing both point down and point left functions and now nothing happens when I click on it.我可以让它们指向下方,但我尝试同时实现指向下方和指向左侧功能,现在单击它时什么也没有发生。 I tried using an if statement but that didn't work either.我尝试使用 if 语句,但这也不起作用。 I did a lot of research but nothing really covered my exact problem, maybe I'm not googling the right terms.我做了很多研究,但没有真正涵盖我的确切问题,也许我没有在谷歌上搜索正确的术语。
const projectList = document.getElementById('projects').querySelector('ul');
const projectPsuedo = projectList.querySelectorAll('span');
const switchBulletDown = event => {
event.target.style.borderLeftColor = 'transparent';
event.target.style.borderTopColor = '#111';
event.target.style.left = '-1.2em';
event.target.style.top = '1.6em';
}
const switchBulletRight = event => {
event.target.style.borderLeftColor = '#111';
event.target.style.borderTopColor = 'transparent';
event.target.style.left = '-1em';
event.target.style.top = '1.4em';
}
const eventHandler = psuedoClass => {
if (psuedoClass.style.borderLeftColor === '#111') {
psuedoClass.addEventListener('click', switchBulletDown);
} else {
psuedoClass.addEventListener('click', switchBulletRight);
}
}
projectPsuedo.forEach(eventHandler);
Ok I got it to work and I used the .toggle method to switch between classes.好的,我让它工作了,我使用 .toggle 方法在类之间切换。
const projectList = document.getElementById('projects').querySelector('ul');
const projectPsuedo = projectList.querySelectorAll('span');
const eventHandler = psuedoClass => {
psuedoClass.addEventListener('click', () => {
psuedoClass.classList.toggle('point-down')
})
}
projectPsuedo.forEach(eventHandler);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.