javascript - 如何动态切换类以在单击时触发不同的功能

我正在尝试创建一些JavaScript代码，以侦听基于其类名的元素上的click事件。这会触发一个功能，该功能会更改同一元素的类，从而使该元素的click事件触发不同的功能，从而实现按钮的切换效果。

但是，尽管初始点击事件成功并触发了函数，但是更改元素的类名不会导致JavaScript触发新函数，而是坚持使用原始函数。

function tioDisable(e) {
var tioButton = document.getElementById(e.explicitOriginalTarget.name + '-tioButton');
tioButton.classList.remove('tio-enable');
tioButton.classList.add('tio-disable');
}

var tioDis = document.getElementsByClassName('tio-disable');
for (var i = 0; i < tioDis.length; i++) {
    tioDis[i].addEventListener('click',tioDisable);
}

function tioEnable(e) {
var tioButton = document.getElementById(e.explicitOriginalTarget.name + '-tioButton');

tioButton.classList.add('tio-enable');
tioButton.classList.remove('tio-disable');
}

var tioEn = document.getElementsByClassName('tio-enable');
for (var i = 0; i < tioEn.length; i++) {
    tioEn[i].addEventListener('click',tioEnable);
}

<img class="tio-enable" src="image.png" name="test" id="test-tioButton">`

我最初尝试使用querySelectorAll，但是我在研究中读到，它有效地创建了一个静态的元素列表，我的研究表明，使用getElementsByClassName应该创建一个动态列表，但这对我不起作用。有更好的方法吗？

最佳答案

该代码首次运行时，它将根据以下代码添加click事件。因为初始代码具有类tio-enable。

var tioEn = document.getElementsByClassName('tio-enable');
   for (var i = 0; i < tioEn.length; i++) {
      tioEn[i].addEventListener('click',tioEnable);
}

现在，如果您单击该图像，它将调用以下函数。

function tioEnable(e) {
   var tioButton = document.getElementById(e.explicitOriginalTarget.name + '-tioButton');

   tioButton.classList.add('tio-enable');
   tioButton.classList.remove('tio-disable');
}

在上面的代码中，您要添加已经具有的类名称tio-enable并删除tio-disable。因此，您的原始内容没有任何变化。因此，这将一次又一次地执行相同的方案。

因此，您必须将click事件侦听器更改为tioDisable或在tioEnable函数内部，您必须添加类tio-Disable并删除类tio-Enable。

现在可以工作吗？没有。因为更改类名后，您没有绑定任何事件。它仍然与旧的Click侦听器绑定在一起。因此，您必须将click侦听器绑定到tioDisable类，并对其他函数也执行相同的操作。检查以下代码段。

function tioDisable(e) {
var tioButton = document.getElementById(e.target.name + '-tioButton');
console.log("called to Disable");
tioButton.classList.remove('tio-enable');
tioButton.classList.add('tio-disable');
var tioEn = document.getElementsByClassName('tio-enable');
for (var i = 0; i < tioEn.length; i++) {
    tioEn[i].addEventListener('click',tioEnable);
}
}
function tioEnable(e) {
var tioButton = document.getElementById(e.target.name + '-tioButton');
console.log("called to Enable");
tioButton.classList.add('tio-disable');
tioButton.classList.remove('tio-enable');
var tioDis = document.getElementsByClassName('tio-disable');
for (var i = 0; i < tioDis.length; i++) {
    tioDis[i].addEventListener('click',tioDisable);
}
}

var tioEn = document.getElementsByClassName('tio-enable');
for (var i = 0; i < tioEn.length; i++) {
    tioEn[i].addEventListener('click',tioEnable);
}

.tio-enable {
  border:2px solid green;
  padding:10px;
}
.tio-disable {
  border:2px solid red;
  padding:10px;
}

<img class="tio-enable" src="image.png" name="test" id="test-tioButton">

可能会有一个简单的解决方案。但是根据您的代码，我已经给出了解决方案。