了解點擊來源的不同方式，優化我的標簽系統

Question

我正在學習 JavaScript，我已經完成了這段代碼，我只是想確保我走對了路，你會用不同的方式做嗎？

尤其困擾我的是，將參數傳遞給“next”和“updateArrows”函數以了解點擊的來源

const changeStep = document.querySelectorAll(".step");
const currentPaginate = document.querySelector(".pagination span.active");
const arrows = document.querySelectorAll(".arrow");

for (let arrow of arrows) {
    arrow.addEventListener("click", function () {
        updateArrows(arrow);
    });
}
for (let step of changeStep) {
    step.addEventListener("click", function () {
        next(step);
    });
}

function updateArrows(arrow, currentStep = null, update = true) {
    let nextStep;
    if (currentStep == null) {
        currentStep = document.querySelector(".step.current");
        if (arrow.classList.contains("arrow-bottom")) {
            nextStep = currentStep.nextElementSibling;
        } else {
            nextStep = currentStep.previousElementSibling;
        }
    } else nextStep = document.querySelector(".step.current");
    if (!arrow.classList.contains("impossible")) {
        if (nextStep.dataset.id != 1 && nextStep.dataset.id != 5) {
            arrows.forEach(function (arrow) {
                if (arrow.classList.contains("impossible")) {
                    arrow.classList.remove("impossible");
                }
            });
        } else if (nextStep.dataset.id == 5) {
            if (arrow.previousElementSibling.classList.contains("impossible"))
                arrow.previousElementSibling.classList.remove("impossible");
            arrow.classList.add("impossible");
        } else if (nextStep.dataset.id == 1) {
            if (arrow.nextElementSibling.classList.contains("impossible"))
                arrow.nextElementSibling.classList.remove("impossible");
            arrow.classList.add("impossible");
        }
        if (update == true) next(nextStep, false);
    }
}

function next(step, update = true) {
    if (!step.classList.contains("current")) {
        const currentStep = document.querySelector(".step.current");
        const nextStep = step.dataset.id;
        currentStep.classList.remove("current");
        step.classList.add("current");
        currentPaginate.textContent = "0" + nextStep;
        let arrow;
        if (currentStep.dataset.id < nextStep) {
            arrow = document.querySelector(".arrow-bottom");
        } else {
            arrow = document.querySelector(".arrow-top");
        }
        if (update == true) updateArrows(arrow, currentStep, false);
    }
}
 

Answer 1

我明白你的意思了。
是的，你是對的。 你可以做得更好...

您可以從事件 object中讀取，而不是傳遞參數箭頭

const changeStep = document.querySelectorAll(".step");
const currentPaginate = document.querySelector(".pagination span.active");
const arrows = document.querySelectorAll(".arrow");

for (let arrow of arrows) arrow.addEventListener("click", updateArrows);

for (let step of changeStep) step.addEventListener("click",  next);


function updateArrows(e, currentStep = null, update = true) {
    let arrow = null
    e.target ? arrow=e.target : arrow=e
    let nextStep;
    if (currentStep == null) {
        currentStep = document.querySelector(".step.current");
        if (arrow.classList.contains("arrow-bottom")) {
            nextStep = currentStep.nextElementSibling;
        } else {
            nextStep = currentStep.previousElementSibling;
        }
    } else nextStep = document.querySelector(".step.current");
    if (!arrow.classList.contains("impossible")) {
        if (nextStep.dataset.id != 1 && nextStep.dataset.id != 5) {
            arrows.forEach(function (arrow) {
                if (arrow.classList.contains("impossible")) {
                    arrow.classList.remove("impossible");
                }
            });
        } else if (nextStep.dataset.id == 5) {
            if (arrow.previousElementSibling.classList.contains("impossible"))
                arrow.previousElementSibling.classList.remove("impossible");
            arrow.classList.add("impossible");
        } else if (nextStep.dataset.id == 1) {
            if (arrow.nextElementSibling.classList.contains("impossible"))
                arrow.nextElementSibling.classList.remove("impossible");
            arrow.classList.add("impossible");
        }
        if (update == true) next(nextStep, false);
    }
}

function next(e, update = true) {
    let step = null
    e.target ? step = e.target : step=e
    if (!step.classList.contains("current")) {
        const currentStep = document.querySelector(".step.current");
        const nextStep = step.dataset.id;
        currentStep.classList.remove("current");
        step.classList.add("current");
        currentPaginate.textContent = "0" + nextStep;
        let arrow;
        if (currentStep.dataset.id < nextStep) {
            arrow = document.querySelector(".arrow-bottom");
        } else {
            arrow = document.querySelector(".arrow-top");
        }
        if (update == true) updateArrows(arrow, currentStep, false);
    }
}

這應該有效，如果沒有，請事先與我聯系。

在激活 eventListener 時，事件 object 被傳遞給 function 並且 e.target 是在這種情況下被單擊的元素。

我所做的事情至關重要，因為您有時會從 eventListener 有時從代碼中調用此 function。 如果元素有 e.target，那么它來自 eventListener，如果沒有，那么它來自代碼。

沒有機會測試它，因為我沒有代碼的 rest。 讓我知道它是否有效。