[英]Unexpected javascript output
我有很多表行是动态生成的,通常采用以下形式
<td class="seatClass" >
<label for="C" class="label-format" >
<span > C0</span >
</label >
<input type = "checkbox" id = "C" name = "seats[US57][]" style = "display: inline-block;" value = "C" class="terminalCheckbox" onchange = "parentNode.querySelector('span').classList.toggle('green');" />
</td>
基本上,我的代码在不同的行中显示了很多标签和复选框。 如果X代表复选框,您可以想象这样的事情
LX IX DX JX
OX PX IX DX
BX AX WX QX
现在有时这些行包含相同的标签,例如我出现在第一行和第二行中,并且两者的代码几乎相同(因为它们的id和名称的值是动态的)。
无论如何,我面临着一个奇怪的问题。 如果您选中一个复选框,我希望其关联的字母变为绿色,因此添加了一些javascript。 这很好。 但是,我的问题是说我单击第二行上的字母I(而不是复选框)。 如果执行此操作,则会选中第一行中I的复选框,并且第一行中的I变为绿色。 因此,选中一个复选框可以正常工作,但是如果我单击一个字母,事情就搞砸了。
是否有任何理由查看我的代码以了解发生这种情况的原因? 我对此没有其他JavaScript,我只能认为这是因为标签和复选框正在其他行上复制,但是对于为什么会发生这种情况我仍然感到困惑。
谢谢
请注意,ID 必须是唯一的。
不用指定for
属性,而是用标签包装输入。 这样就不必知道嵌套控件的确切ID。
.green{ color:green; }
<table> <tr> <td class="seatClass" > <label class="label-format" > <span > C0</span > <input type="checkbox" name="seats[US57][]" style="display: inline-block;" value="C" class="terminalCheckbox" onchange="parentNode.classList.toggle('green');" /> </label > </td> </tr> <tr> <td class="seatClass" > <label class="label-format" > <span > C0</span > <!-- note: change the onchange javascript to match the new layout. The label will now be the parent of the input. --> <input type="checkbox" name="seats[US57][]" style="display: inline-block;" value="C" class="terminalCheckbox" onchange="parentNode.classList.toggle('green');" /> </label > </td> </tr> </table>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.