再次單擊后如何將事件恢復為原始狀態？

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