在原版 Javascript 中单击时将类递减 1

Question

我目前在 2 个按钮上有一个递增和递减方法。我的递增函数正常触发，但是我的递减方法失败了。我想从变量中减去，所以一个例子是，如果我有类"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--来使用类名上的递减值。此外，仅当div 具有class1或class2类时，您当前的布尔变量hasClass才会返回true。class3及以上版本再次返回false。

您可以使用 indexOf(( 来检查元素类名，而不是使用contains()，如果它返回 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/