为什么切换不工作在每个按钮点击在Js?

Question

我在每张卡片中都有一个button。当我第一次点击按钮时，应该给出一个文本第二次应该给出特定的文本，第三次应该给出相同的文本。点击的顺序应该是0, 1, 2, 3, 0, 1, 2, 3 ...

我有一个空数组，因为按钮的值是未知的。如下所示，

var btn = [];
function btnVal(ele) {
btn[ele.id] = !btn[ele.id] ? 1 : btn[ele.id] === 3 ? 0 : btn[ele.id] +1;
switch(btn[ele.id])
{
case 0:
return {};
case 1 :
return {};
case 2 :
return {};
case 3:
return {};
default:
}
}

<button id = "button1"></button>

三元

btn[ele.id] = !btn[ele.id] ? 1 : btn[ele.id] === 3 ? 0 : btn[ele.id] +1;

它不工作!

问题，当我点击按钮时，它总是取case3值。所有其他情况都被忽略了。

我需要执行每一个case。

有人能帮帮我吗?

许多谢谢。

Answer 1

您可以将赋值移到末尾，并为undefined添加一个新case:

var btn = [];
function btnVal(ele) {
switch (btn[ele.id]) {
case 0:
case undefined:
console.log('case 0');
break;
case 1:
console.log('case 1');
break;
case 2:
console.log('case 2');
break;
case 3:
console.log('case 3');
break;
default:
}
btn[ele.id] = !btn[ele.id] ? 1 : btn[ele.id] === 3 ? 0 : btn[ele.id] + 1;
return {};
}
document.getElementById('button1').addEventListener('click', btnVal);

<button id="button1">Click</button>

Answer 2

不确定我是否理解对了。但是如何将当前按钮计数器存储在每个按钮的数据集中并从数组

中选择合适的文本呢?

<button class="btn" data-counter="0">Some text</button>
<button class="btn" data-counter="0">Some text</button>
<button class="btn" data-counter="0">Some text</button>
<script>
var texts = ["Some text", "Text1", "Text2", "Text3"];
document.querySelectorAll(".btn").forEach((button) => {
button.addEventListener("click", function (){
this.dataset.counter = +this.dataset.counter + 1;

if(this.dataset.counter % 4 == 0){
this.dataset.counter = 0;
}
this.innerText = texts[this.dataset.counter];
});
});
</script>