我可以简化这个javascript if语句吗？

Question

我目前正在开发一个旋转木马类型的网站，从它的外观来看，到目前为止我写的代码看起来非常相似，看起来好像它可以用某种方式简化。

我只是提到if语句部分，但欢迎任何其他建议。

提前致谢。

// scripts

function app() {

    console.log("App is running");

    // store elements in dom
    var numberButtons = document.querySelectorAll(".number");

    // loop to add event listener to each button
    for (var i = 0; i < numberButtons.length; i++) {

        // add click event listener
        numberButtons[i].addEventListener("click", changeButton);
    }

    function changeButton(e) {

        // get dataset value
        var target = e.target;
        var targetDataset = e.currentTarget.dataset.number;
        var backgroundImage = document.getElementById("background-image");
        var sections = document.querySelectorAll(".screen");
        var intro = document.getElementById("intro");
        var sectionNumbers = document.querySelectorAll(".section-number");

        for (var numberButton of numberButtons) {
            numberButton.classList.remove("number-active");
        }

        for (var section of sections) {
            section.classList.add("section-hidden");
        }

        for (var sectionNumber of sectionNumbers) {
            sectionNumber.classList.add("section-number-hidden");
        }

        if (targetDataset === "zero") {
            backgroundImage.removeAttribute("class");
            target.classList.add("number-active");
            backgroundImage.classList.add("position-" + targetDataset);

            setTimeout(function(){
            sections[0].classList.remove("section-hidden");
            sections[0].classList.add("sections-active");

			},1000);

        } else if (targetDataset === "one") {
            target.classList.add("number-active");
            backgroundImage.removeAttribute("class");
            backgroundImage.classList.add("position-" + targetDataset);
            intro.classList.remove("intro-active");
            intro.classList.add("intro-hidden");

            setTimeout(function(){
            sections[1].classList.remove("section-hidden");
            sections[1].classList.add("sections-active");
            sectionNumbers[0].classList.remove("section-number-hidden");
            sectionNumbers[0].classList.add("section-number-active");

			},1000);

        } else if (targetDataset === "two") {
            backgroundImage.removeAttribute("class");
            target.classList.add("number-active");
            backgroundImage.classList.add("position-" + targetDataset);
            intro.classList.remove("intro-active");
            intro.classList.add("intro-hidden");

            setTimeout(function(){
            sections[2].classList.remove("section-hidden");
            sections[2].classList.add("sections-active");

            sectionNumbers[1].classList.remove("section-number-hidden");
            sectionNumbers[1].classList.add("section-number-active");

			},1000);

        } else if (targetDataset === "three") {
            target.classList.add("number-active");
            backgroundImage.classList.add("position-" + targetDataset);
            intro.classList.remove("intro-active");
            intro.classList.add("intro-hidden");

            setTimeout(function(){
            sections[3].classList.remove("section-hidden");
            sections[3].classList.add("sections-active");

            sectionNumbers[2].classList.remove("section-number-hidden");
            sectionNumbers[2].classList.add("section-number-active");

			},1000);

        } else if (targetDataset === "four") {
            backgroundImage.removeAttribute("class");
            target.classList.add("number-active");
            backgroundImage.classList.add("position-" + targetDataset);
            intro.classList.remove("intro-active");
            intro.classList.add("intro-hidden");

            setTimeout(function(){

            sections[4].classList.remove("section-hidden");
            sections[4].classList.add("sections-active");
            sectionNumbers[3].classList.remove("section-number-hidden");
            sectionNumbers[3].classList.add("section-number-active");

			},1000);

        } else if (targetDataset === "five") {
            backgroundImage.removeAttribute("class");
            target.classList.add("number-active");
            backgroundImage.classList.add("position-" + targetDataset);
            intro.classList.remove("intro-active");
            intro.classList.add("intro-hidden");

            setTimeout(function(){

            sections[5].classList.remove("section-hidden");
            sections[5].classList.add("sections-active");
            sectionNumbers[4].classList.remove("section-number-hidden");
            sectionNumbers[4].classList.add("section-number-active");


			},1000);

        } else if (targetDataset === "six") {
            backgroundImage.removeAttribute("class");
            target.classList.add("number-active");
            backgroundImage.classList.add("position-" + targetDataset);
            intro.classList.remove("intro-active");
            intro.classList.add("intro-hidden");

            setTimeout(function(){

            sections[6].classList.remove("section-hidden");
            sections[6].classList.add("sections-active");
            sectionNumbers[5].classList.remove("section-number-hidden");
            sectionNumbers[5].classList.add("section-number-active");

			},1000);

        } else if (targetDataset === "seven") {
            backgroundImage.removeAttribute("class");
            target.classList.add("number-active");
            backgroundImage.classList.add("position-" + targetDataset);
            intro.classList.remove("intro-active");
            intro.classList.add("intro-hidden");

            setTimeout(function(){

            sections[7].classList.remove("section-hidden");
            sections[7].classList.add("sections-active");

            sectionNumbers[6].classList.remove("section-number-hidden");
            sectionNumbers[6].classList.add("section-number-active");

			},1000);

        } else if (targetDataset === "eight") {
            backgroundImage.removeAttribute("class");
            target.classList.add("number-active");
            backgroundImage.classList.add("position-" + targetDataset);
            intro.classList.remove("intro-active");
            intro.classList.add("intro-hidden");

            setTimeout(function(){

            sections[8].classList.remove("section-hidden");
            sections[8].classList.add("sections-active");

            sectionNumbers[7].classList.remove("section-number-hidden");
            sectionNumbers[7].classList.add("section-number-active");

			},1000);

        } else if (targetDataset === "nine") {
            backgroundImage.removeAttribute("class");
            target.classList.add("number-active");
            backgroundImage.classList.add("position-" + targetDataset);
            intro.classList.remove("intro-active");
            intro.classList.add("intro-hidden");

            setTimeout(function(){

            sections[9].classList.remove("section-hidden");
            sections[9].classList.add("sections-active");

            sectionNumbers[8].classList.remove("section-number-hidden");
            sectionNumbers[8].classList.add("section-number-active");

        },1000);

        }
    }
}

document.onload = app();

Answer 1

由于所有遍历数字的迭代具有相同的主体，因此您可以检查数组中的数字，并检查一个主体。

var arr = ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine"];

for(let i=0; i<arr.length; i++)
    if (targetDataset === arr[i]) {
        backgroundImage.removeAttribute("class");
        target.classList.add("number-active");
        backgroundImage.classList.add("position-" + targetDataset);
        intro.classList.remove("intro-active");
        intro.classList.add("intro-hidden");

        setTimeout(function(){

            sections[i].classList.remove("section-hidden");
            sections[i].classList.add("sections-active");
            if(i>0){
            sectionNumbers[i-1].classList.remove("section-number-hidden");
            sectionNumbers[i-1].classList.add("section-number-active");
            }
        },1000);

    }
});

如果您愿意使用 ES6 （强烈推荐），那就更好了：

const arr = ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine"];

for (let i = 0; i < arr.length; i++) {
  if (targetDataset !== arr[i])
    continue;
  backgroundImage.removeAttribute("class");
  target.classList.add("number-active");
  backgroundImage.classList.add("position-" + targetDataset);
  intro.classList.remove("intro-active");
  intro.classList.add("intro-hidden");

  setTimeout(() => {
    let sect = sections[i].classList;
    sect.remove("section-hidden");
    sect.add("sections-active");
    if (i > 0) {
      let sectNum = sectionNumbers[i-1].classList;
      sectNum.remove("section-number-hidden");
      sectNum.add("section-number-active");
    }
  }, 1000);
}

上述代码比原始代码更具可读性和清晰度：

if (targetDataset === "zero") {
        backgroundImage.removeAttribute("class");
        target.classList.add("number-active");
        backgroundImage.classList.add("position-" + targetDataset);

        setTimeout(function(){
        sections[0].classList.remove("section-hidden");
        sections[0].classList.add("sections-active");

        },1000);

    } else if (targetDataset === "one") {
        target.classList.add("number-active");
        backgroundImage.removeAttribute("class");
        backgroundImage.classList.add("position-" + targetDataset);
        intro.classList.remove("intro-active");
        intro.classList.add("intro-hidden");

        setTimeout(function(){
        sections[1].classList.remove("section-hidden");
        sections[1].classList.add("sections-active");
        sectionNumbers[0].classList.remove("section-number-hidden");
        sectionNumbers[0].classList.add("section-number-active");

        },1000);

    } else if (targetDataset === "two") {
        backgroundImage.removeAttribute("class");
        target.classList.add("number-active");
        backgroundImage.classList.add("position-" + targetDataset);
        intro.classList.remove("intro-active");
        intro.classList.add("intro-hidden");

        setTimeout(function(){
        sections[2].classList.remove("section-hidden");
        sections[2].classList.add("sections-active");

        sectionNumbers[1].classList.remove("section-number-hidden");
        sectionNumbers[1].classList.add("section-number-active");

        },1000);

    } else if (targetDataset === "three") {
        target.classList.add("number-active");
        backgroundImage.classList.add("position-" + targetDataset);
        intro.classList.remove("intro-active");
        intro.classList.add("intro-hidden");

        setTimeout(function(){
        sections[3].classList.remove("section-hidden");
        sections[3].classList.add("sections-active");

        sectionNumbers[2].classList.remove("section-number-hidden");
        sectionNumbers[2].classList.add("section-number-active");

        },1000);

    } else if (targetDataset === "four") {
        backgroundImage.removeAttribute("class");
        target.classList.add("number-active");
        backgroundImage.classList.add("position-" + targetDataset);
        intro.classList.remove("intro-active");
        intro.classList.add("intro-hidden");

        setTimeout(function(){

        sections[4].classList.remove("section-hidden");
        sections[4].classList.add("sections-active");
        sectionNumbers[3].classList.remove("section-number-hidden");
        sectionNumbers[3].classList.add("section-number-active");

        },1000);

    } else if (targetDataset === "five") {
        backgroundImage.removeAttribute("class");
        target.classList.add("number-active");
        backgroundImage.classList.add("position-" + targetDataset);
        intro.classList.remove("intro-active");
        intro.classList.add("intro-hidden");

        setTimeout(function(){

        sections[5].classList.remove("section-hidden");
        sections[5].classList.add("sections-active");
        sectionNumbers[4].classList.remove("section-number-hidden");
        sectionNumbers[4].classList.add("section-number-active");


        },1000);

    } else if (targetDataset === "six") {
        backgroundImage.removeAttribute("class");
        target.classList.add("number-active");
        backgroundImage.classList.add("position-" + targetDataset);
        intro.classList.remove("intro-active");
        intro.classList.add("intro-hidden");

        setTimeout(function(){

        sections[6].classList.remove("section-hidden");
        sections[6].classList.add("sections-active");
        sectionNumbers[5].classList.remove("section-number-hidden");
        sectionNumbers[5].classList.add("section-number-active");

        },1000);

    } else if (targetDataset === "seven") {
        backgroundImage.removeAttribute("class");
        target.classList.add("number-active");
        backgroundImage.classList.add("position-" + targetDataset);
        intro.classList.remove("intro-active");
        intro.classList.add("intro-hidden");

        setTimeout(function(){

        sections[7].classList.remove("section-hidden");
        sections[7].classList.add("sections-active");

        sectionNumbers[6].classList.remove("section-number-hidden");
        sectionNumbers[6].classList.add("section-number-active");

        },1000);

    } else if (targetDataset === "eight") {
        backgroundImage.removeAttribute("class");
        target.classList.add("number-active");
        backgroundImage.classList.add("position-" + targetDataset);
        intro.classList.remove("intro-active");
        intro.classList.add("intro-hidden");

        setTimeout(function(){

        sections[8].classList.remove("section-hidden");
        sections[8].classList.add("sections-active");

        sectionNumbers[7].classList.remove("section-number-hidden");
        sectionNumbers[7].classList.add("section-number-active");

        },1000);

    } else if (targetDataset === "nine") {
        backgroundImage.removeAttribute("class");
        target.classList.add("number-active");
        backgroundImage.classList.add("position-" + targetDataset);
        intro.classList.remove("intro-active");
        intro.classList.add("intro-hidden");

        setTimeout(function(){

        sections[9].classList.remove("section-hidden");
        sections[9].classList.add("sections-active");

        sectionNumbers[8].classList.remove("section-number-hidden");
        sectionNumbers[8].classList.add("section-number-active");

    },1000);

    }

Answer 2

您可以获得targetDataset字符串的数值，该值对应于您在sections数组中使用的索引。那你就不再需要if，也不需要循环。然后if...else...else...else...部分变为：

    var targetDatasetNo = ["zero", "one", "two", "three", "four", "five",
            "six", "seven", "eight", "nine"].indexOf(targetDataset);
    backgroundImage.setAttribute("class", "position-" + targetDataset);
    target.classList.add("number-active");
    if (targetDatasetNo) {
        intro.classList.remove("intro-active");
        intro.classList.add("intro-hidden");
    }
    setTimeout(function(){
        sections[targetDatasetNo].classList.remove("section-hidden");
        sections[targetDatasetNo].classList.add("sections-active");
        if (targetDatasetNo) {
            sectionNumbers[targetDatasetNo-1].classList.remove("section-number-hidden");
            sectionNumbers[targetDatasetNo-1].classList.add("section-number-active");
        }
    },1000);

Answer 3

我建议像这样添加else if语句：

// add targets up to "nine" with "OR" ( || ) 
if (targetDataset === "one" || targetDataset === "two") {
  arget.classList.add("number-active");
            backgroundImage.removeAttribute("class");
            backgroundImage.classList.add("position-" + targetDataset);
            intro.classList.remove("intro-active");
            intro.classList.add("intro-hidden");

            setTimeout(function(){
            sections[1].classList.remove("section-hidden");
            sections[1].classList.add("sections-active");
            sectionNumbers[0].classList.remove("section-number-hidden");
            sectionNumbers[0].classList.add("section-number-active");

            },1000);
}

因为您正在为这些条件执行相同的代码。