Question

我正在尝试创建一些JavaScript代码，用于侦听基于其类名的元素上的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应该创建一个动态列表但是这对我不起作用。有没有更好的方法呢？

Answer 1

当代码第一次运行时，它将根据以下代码添加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并删除该类{ {1}}。

现在可以吗？ NO。因为更改了类名后你没有绑定任何事件。它仍然与旧的点击监听器绑定。因此，您必须为tio-Enable类绑定click侦听器，并对其他函数执行相同操作。请查看以下代码段。

＆＃13;

tioDisable

＆＃13;

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);
}

＆＃13;

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

＆＃13;

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

Answer 2

你能试试吗？我认为这就是你所需要的。

function tioToggle(e) {
    var tioButton = e.currentTarget;
    tioButton.classList.toggle('tio-enable');
    tioButton.classList.toggle('tio-disable');
}


var tioDis = document.getElementsByClassName('tio-disable');

for (var i = 0; i < tioDis.length; i++) {
    tioDis[i].addEventListener('click', tioToggle);
}

var tioEn = document.getElementsByClassName('tio-enable');

for (var i = 0; i < tioEn.length; i++) {
    tioEn[i].addEventListener('click', tioToggle);
}

@Suresh Ponnukalai answer解释了为什么您的代码无效。

如何动态切换类以触发不同的功能点击

2 个答案: