使用switch陳述句單擊第二次，第三次和第四次時如何使按鈕具有不同的輸出？

我試圖讓輸入按鈕在每次單擊時都有不同的回應。我試圖在第一次單擊按鈕時使一行網格旋轉，第二次單擊按鈕時使第二行旋轉，依此類推。我一直在嘗試使用 switch 陳述句，但沒有成功，有人可以幫我嗎？

我的 HTML：

<button onclick = "clickFunction(); ani();" class="key-button" id = "ENTER">ENTER</button>
    </div>

     <div class = "amot" onkeypress="return (this.innerText.length <= 0)" contenteditable = "true" id = "amo1"></div>
     <div class = "amot" onkeypress="return (this.innerText.length <= 0)" contenteditable = "true" id = "amo2"></div>
     <div class = "amot" onkeypress="return (this.innerText.length <= 0)" contenteditable = "true" id = "amo3"></div>
     <div class = "amot" onkeypress="return (this.innerText.length <= 0)" contenteditable = "true" id = "amo4"></div>
     <div class = "amot" onkeypress="return (this.innerText.length <= 0)" contenteditable = "true" id = "amo5"></div>
     <div class = "amot" onkeypress="return (this.innerText.length <= 0)" contenteditable = "true" id = "amo6"></div>
     <div class = "amot" onkeypress="return (this.innerText.length <= 0)" contenteditable = "true" id = "amo7"></div>
     <div class = "amot" onkeypress="return (this.innerText.length <= 0)" contenteditable = "true" id = "amo8"></div>
     <div class = "amot" onkeypress="return (this.innerText.length <= 0)" contenteditable = "true" id = "amo9"></div>
     <div class = "amot" onkeypress="return (this.innerText.length <= 0)" contenteditable = "true" id = "amo10"></div>

我的 CSS：

.container,
.container2 {
  display: grid;
  grid-template-columns: .2fr .2fr .2fr .2fr .2fr .2fr .2fr .2fr;
  grid-gap: 10px;
  text-align: center;
  text-transform: capitalize;
  position: relative;
  height: 1500px;
  width: 1500px;
  transform: translate(100%, 0%);
  transform: scale(0.6, 0.6);

}

.container div {
  background-color: black;
  text-align: center;
  text-transform: capitalize;
  padding-right: 450px;
}

.container div {
  background-color: black;
  color: white;
  font-size: 300px;
    text-align: center;
    text-transform: capitalize;
}

.container div::before {
  content: "";
  padding-bottom: 1%;
  display: inline-block;
  vertical-align: top;
  text-align: center;
  text-transform: capitalize;

}

.container2 div::after {
  content: "";
  padding-bottom: 5%;
  display: block;
  text-align: center;
  text-transform: capitalize;
}

.container2 .text {
  position: absolute;
  text-align: center;
  text-transform: capitalize;

}

.container2 div {
  background-color: green;
  position: relative;
  overflow: hidden;
  text-align: center;
  text-transform: capitalize;
}
.classname {
  -webkit-animation-name: cssAnimation;
  -webkit-animation-duration: 3s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes cssAnimation {
  from {
    -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
  }
  to {
    -webkit-transform: rotate(360deg) scale(1) skew(0deg) translate(0px);
  }
}

我的Javascript：

function ani() {
  var count = 0;

  switch(count) {
  case 0:
  document.getElementById('amo1').className = 'classname';
  document.getElementById('amo2').className = 'classname';
  document.getElementById('amo3').className = 'classname';
  document.getElementById('amo4').className = 'classname';
  document.getElementById('amo5').className = 'classname';
  document.getElementById('amo6').className = 'classname';
  document.getElementById('amo7').className = 'classname';
  document.getElementById('amo8').className = 'classname';
  break;

  case 1:
  document.getElementById('amo9').className = 'classname';
  break;
  case 2:
  document.getElementById('amo10').className = 'classname';
  break;
  }
  
}}

完整代碼在這里：https ://code.sololearn.com/WX59M6HHngc5 提前謝謝

uj5u.com熱心網友回復：

您必須將計數存盤在函式體之外：

const ani = (() => {
  var count = 0;
  return function() {
    switch (count) {
      case 0:
        document.getElementById('amo1').className = 'classname';
        document.getElementById('amo2').className = 'classname';
        document.getElementById('amo3').className = 'classname';
        document.getElementById('amo4').className = 'classname';
        document.getElementById('amo5').className = 'classname';
        document.getElementById('amo6').className = 'classname';
        document.getElementById('amo7').className = 'classname';
        document.getElementById('amo8').className = 'classname';
        break;

      case 1:
        document.getElementById('amo9').className = 'classname';
        break;
      case 2:
        document.getElementById('amo10').className = 'classname';
        break;
    }
    count = (count   1) % 4;
  };
})();

我首選的實作方式是使用IIFE創建的閉包。

例子：

const ani = (() => {
  var count = 0;
  return function() {
    switch (count) {
      case 0:
        document.getElementById('amo1').className = 'classname';
        document.getElementById('amo2').className = 'classname';
        document.getElementById('amo3').className = 'classname';
        document.getElementById('amo4').className = 'classname';
        document.getElementById('amo5').className = 'classname';
        document.getElementById('amo6').className = 'classname';
        document.getElementById('amo7').className = 'classname';
        document.getElementById('amo8').className = 'classname';
        break;

      case 1:
        document.getElementById('amo9').className = 'classname';
        break;
      case 2:
        document.getElementById('amo10').className = 'classname';
        break;
    }
    count = (count   1) % 4;
  };
})();

document.querySelector('button').addEventListener('click', ani);

.classname {
  display: block;
  background-color: blue;
  height: 10px;
  width: 100px;
}

<div id="amo1"></div>
<div id="amo2"></div>
<div id="amo3"></div>
<div id="amo4"></div>
<div id="amo5"></div>
<div id="amo6"></div>
<div id="amo7"></div>
<div id="amo8"></div>
<div id="amo9"></div>
<div id="amo10"></div>

<button>Click</button>

標籤：javascript html css dom 开关语句

上一篇：將資料從Api附加到Dom

下一篇：使用puppeteer在表格中獲取元素句柄