提问人：Anandha 提问时间：3/19/2022 更新时间：3/19/2022 访问量：176
如何在 UI：Repeat for JavaScript 代码中生成不同的 DIV ID
how to generate different div id inside ui:repeat for javascript code
问：
我有一个 ui：repeat 组件，在该 ui：repeat 中有一个 div 在我的 javascript 代码中使用。我必须在每个ui：repeat调用上动态更改此div id。我怎样才能让它成为可能？
请找到以下代码供您参考。
Xhtml 代码
<ui:repeat var="id1" value"#{somethingbean.some"} id="repeaterId" varStatus="rowStatus"
rendered="somethingbean.some.someisthere">
<fieldset class="mock">
<legend></legend>
<div id="idToChange">
.....................................................
.............................................................
</div>
</fieldset>
</ui:repeat>
JS代码
function loadFunction() {
let varsome= document.getElementsById('idToChange');
}
答：
2赞
jkoch
3/19/2022
#1
这应该可以访问 .rowStatus.index
<ui:repeat var="id1" value"#{somethingbean.some"} id="repeaterId" varStatus="rowStatus"
rendered="somethingbean.some.someisthere">
<fieldset class="mock">
<legend></legend>
<div id="prefix#{rowStatus.index}">
.....................................................
.............................................................
</div>
</fieldset>
</ui:repeat>
编辑
<ui:repeat var="id1" value"#{somethingbean.some"} id="repeaterId" varStatus="rowStatus"
rendered="somethingbean.some.someisthere">
<fieldset class="mock">
<legend></legend>
<input type="checkbox" onclick="(evt)=>handleCheckboxClicked(evt,'prefix#{rowStatus.index}')" />
<div id="prefix#{rowStatus.index}">
.....................................................
.............................................................
</div>
</fieldset>
</ui:repeat>
function handleCheckboxClicked(evt,id){
const div = document.getElementById(id);
}
评论
0赞
Anandha
3/19/2022
嗨，jkoch，我也可以在我的 javascript 中调用相同的前缀#{rowStatus.index} id吗？
0赞
jkoch
3/19/2022
#{rowStatus.index}仅在 with 中有效。你想在你的javascript中实现什么？也许有更简单的方法。ui:repeatvarStatus="rowStatus"
0赞
Anandha
3/19/2022
嗨，jkoch，我有一个复选框，并且有一个输入字段块与之相关联，如果我单击该复选框，则输入字段块将打开，如果我取消选中该复选框，则它将隐藏。所有这些都将通过调用 div ID 来完成。但是，如果我使用 ui：repeat 复制复选框，那么隐藏和显示功能将仅适用于第一个复选框。（即，输入字段块的隐藏和显示功能不适用于新创建的复选框）
1赞
jkoch
3/19/2022
如果复选框与 div 相同，则可以添加到其 onChange 处理程序参数中，并在事件处理程序中选择具有此索引的 div。ui:repeat#{rowStatus.index}
1赞
jkoch
3/19/2022
我已经更新了我的答案。如果这符合您的需求，请告诉我。
评论