修复JS代码：交换表格tr元素的.vermelho与.azul类样式

你的代码逻辑存在问题，导致点击按钮后所有行变成单一颜色：

当页面同时存在.vermelho和.azul类的行时，第一个if条件会成立（只要有一个.vermelho元素存在就会触发），此时所有.vermelho行都会被改成.azul。执行完这个操作后，页面上所有可变色的行都变成了.azul，而else if分支因为是互斥判断，根本不会执行——所以第一次点击后表格全蓝；再次点击时，因为没有.vermelho元素，会触发else if，把所有.azul改成.vermelho，表格全红。

修正后的代码 #

只需要修改JS部分，遍历每一行单独判断切换类即可：

function invertStyle() {
  // 遍历所有带有vermelho或azul类的表格行
  $('tr.vermelho, tr.azul').each(function() {
    const $row = $(this);
    if ($row.hasClass('vermelho')) {
      $row.removeClass('vermelho').addClass('azul');
    } else {
      $row.removeClass('azul').addClass('vermelho');
    }
  });
}

为什么这样有效 #

通过.each()方法逐个处理每一行，针对当前行的类单独进行切换，不会因为批量修改某一类元素导致所有行变成同一颜色，完美实现两类样式的互转。

内容的提问来源于stack exchange，提问作者Rute Souza