我正在维护一个使用 JQuery 构建的 GUI。在 GUI 的一部分中, 可以打开多个选项卡来编辑数据。
打开新选项卡时,它是通过克隆第一个选项卡内容 div 和 更新 div 中的输入字段。
新选项卡根据选项卡索引被赋予唯一的 ID,但所有 克隆的选项卡 div 中的其他 ID 与原始选项卡 div 相同。
现在,这似乎会引起问题,因为 ID 不是唯一的 更多的。选择输入字段时,以下内容适用于 Firefox 3.6.8:
$('#tabs-2 #scriptName').val( data.name );
这将选择 ID 为 tabs-2 的选项卡 div,然后选择输入 该 div 中的字段具有 ID scriptName 并设置其值。现在 这不适用于 Chrome 或 Firefox 3.0.19。
DOM 层次结构看起来像这样
<div id="tabs">
<div id="tabs-1">
...
<input id="scriptName"/>
...
</div>
...
<div id="tabs-2">
...
<input id="scriptName"/>
...
</div>
</div>
一种解决方案是在克隆的选项卡内容中创建所有 ID div 是独一无二的,但这似乎是一种蛮力方法。一定是 可以以更独立的方式处理 div 中的内容 无需唯一 ID。
生成新选项卡时克隆整个 div 当然是 粗略的 hack,一个更优雅的解决方案是重用相同的 div,但是 根据所选选项卡更改内容,但这就是它的方式 是现在构建的,不幸的是它是使用后来的版本开发和测试的 该选择器在 Firefox 浏览器中工作。
事前编辑
当我插入离线编辑的问题时,我发现了很多相关问题的答案,这些问题的答案给出了如何解决此问题的一些提示,但无论如何我都会发布此问题,因为始终欢迎有关如何解决此问题的良好建议。
编辑
我现在正在尝试类方法,但我确实有一个问题,一些输入字段使用带有 for 属性的标签,for 属性必须指向唯一的 id。但这可以通过省略 for 属性并将输入字段设置为嵌套元素来解决。
最佳答案
只是一个建议,你可以将输入的 id 设置为类吗?这样克隆时就不会出现问题。您的代码将类似于 $('#tabs-2 .scriptName').val( data.name );
关于JQuery基本选择器用法和非唯一元素ID,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3405351/