點擊原版 Javascript 將 class 減 1

Question

我目前在 2 個按鈕上有一個遞增和遞減方法。 我的增量 function 很好，但是我的減量方法失敗了。 我只想從變量中減去一個例子，如果我有 class “move2”並觸發遞減方法，我會得到“move1”等等......d

有什么想法嗎？

let i = 0;

const increment = (div) => {
    document.getElementById(div).classList.remove("move" + i++);
    document.getElementById(div).classList.add("move" + i); 
}

const decrement = (div) => {
    var hasClass = document.getElementById(div).classList.contains('move1', 'move2')
    if(hasClass === true)
        document.getElementById(div).classList.remove("move" + i--);
}

Answer 1

正如@MikeMcCaughan 提到的，您需要使用--i而不是i--來使用 class 名稱上的遞減值。 此外，僅當 div 具有class1或class2的 class 時，您當前的 boolean 變量hasClass返回true 。 class3及以上再次返回false 。

您可以使用indexOf()代替使用contains()來檢查元素 class 名稱，如果它返回 true，則可以使用.classList.replace()方法將類名更新為遞減值。

const decrement = (div) => {
   let className = document.getElementById('x').getAttribute("class"); // get element class value
   let hasClass = className.indexOf('move') >= 0; // returns true if class value has "move" in it
    if(hasClass === true)
      document.getElementById('x').classList.replace((className),("move" + --i));     // replace the class value with the decremented class name
}

---

jsFiddle使用上述方法： https://jsfiddle.net/AndrewL64/rdjv5hsm/11/

---

此外，如果您想將減量限制為 0，您可以從以下位置編輯 if 條件：

if(hasClass === true) {
    document.getElementById('x').classList.replace((className),("move" + --i));
}

至：

if(hasClass === true && i > 0) {
    document.getElementById('x').classList.replace((className),("move" + --i));
}

帶有減量上限的jsFiddle：https://jsfiddle.net/AndrewL64/rdjv5hsm/14/