再次单击后如何将事件恢复为原始状态？

Question

我对网络开发比较陌生，我正在建立一个投资组合网站。 我有这些使用边框制作的三角形要点。 最初，它们指向右侧，想法是能够单击它们，然后让它们指向下方（如箭头），然后显示一些图像（尚未到达该部分），然后再指向再次单击时的右侧。 我可以让它们指向下方，但我尝试同时实现指向下方和指向左侧功能，现在单击它时什么也没有发生。 我尝试使用 if 语句，但这也不起作用。 我做了很多研究，但没有真正涵盖我的确切问题，也许我没有在谷歌上搜索正确的术语。

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);

Answer 1

好的，我让它工作了，我使用 .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);