javascript - jQuery函数问题。 添加太多类(JQuery Function problem. Adding too many classes)

Question

I am having a problem with this function.(我对此功能有疑问。)

The problem is with TD index 2, as commented below.(问题出在TD索引2上，如下所述。) The HTML in each iteration is correct, but I cannot figure out why it is adding extra classes?(每次迭代中的HTML都是正确的，但是我不知道为什么要添加额外的类？) The class should be the same as the HTML.(该类应与HTML相同。) 1st iteration: HTML: A CLASS: A(第一次迭代：HTML：A CLASS：A) 2nd iteration: HTML: B CLASS: AB(第二次迭代：HTML：B CLASS：AB) 3rd iteration: HTML: C CLASS: ABC(第三次迭代：HTML：C CLASS：ABC) 4th iteration: HTML: A CLASS: ABC(第4次迭代：HTML：A类：ABC) 5th iteration: HTML: B CLASS: ABC(第5次迭代：HTML：B CLASS：ABC) 6th iteration: HTML: C CLASS: ABC(第6次迭代：HTML：C CLASS：ABC) function formatTable(){ count=1; phase=""; var phase13 = $('input[name=voltage]:checked').attr("phase"); var cClass = $('input[name=voltage]:checked').attr("cClass"); $tableID.find('tbody tr').each(function(idx){ $(this).children().eq(1).html(count++); switch (phase13){ case "1": if ((count) % 4 == 0) { phase = "B"; } else { phase = "A"; } break; case "3": default: if ((count+1) % 3 == 0){ phase="A"; } else { if (count % 3 == 0){ phase="C"; } else { phase="B"; } } break; } $(this).children().eq(2).html(phase).addClass(cClass).addClass(phase); // This sets HTML to A, B or C, but after the 3rd iteration adds Class A, B and C. $(this).children().eq(3).html(count++); }); }   ask by Mike translate from so

Answer 1

Your problem is that you're never removing the old phase class, so the new class is simply being added to the list.(您的问题是您永远不会删除旧的phase类，因此新的类仅被添加到列表中。)

Add removeClass('AB C') before adding the new phase class:(在添加新的阶段类之前，添加removeClass('AB C') ：) $(this).children().eq(2).html(phase).addClass(cClass).removeClass('A B C').addClass(phase); By using removeClass('AB C') you don't have to worry about figuring out which phase class was currently set on the element, as this will remove them all.(通过使用removeClass('AB C')您不必担心弄清楚当前在元素上设置了哪个阶段类，因为这将全部删除。)