Question

我正在使用<ui:repeat>迭代一个项目列表。在内部我使用javascript来处理每次迭代的一些数据，并希望将其输出到为每次迭代创建的div中。以下代码当然只会为最后一次迭代输出数据（之前的数据会被覆盖）。我想不出怎样做的方法。

这是jsf代码：

<ui:repeat var="item" value="#{someBean.items}">
    <script type="text/javascript">
        var item = "#{item.id}";
        showItem();
    </script>
    <div id="#{item.id}"></div>
</ui:repeat>

这是功能：

function showItem(){
    document.getElementById(item).innerHTML = 'this is an item';
}

Answer 1

尝试这样做：

<ui:repeat var="item" value="#{someBean.items}">
    <div id="#{item.id}"></div>
    <script type="text/javascript">
        showItem("#{item.id}");
    </script>
</ui:repeat>

-

function showItem(item){
    document.getElementById(item).innerHTML = 'this is an item';
}

原因在于，即使你将每个var包装在一个脚本标记中，它们也都在全局范围内，因此在循环的每次迭代中都会相互写入。

为了让每个脚本阻止它自己的范围你可以将vars包装在这样的自执行函数中，但是使用你当前的逻辑，它似乎有点过分：

<ui:repeat var="item" value="#{someBean.items}">
    <div id="#{item.id}"></div>
    <script type="text/javascript">
    (function(){
        var item = "#{item.id}";
        showItem(item);
    })();
    </script>
</ui:repeat>

Answer 2

您可以使用“getElementsByName”获取所有项目，然后在循环中显示它们。当然，其他方式包括“getElementsByClassName”或jQuery。

<ui:repeat id="outer" var="item" value="#{someBean.items}">
   <div id="#{item.id}" name="item"></div> 
</ui:repeat>

<script type="text/javascript">
function showAllItems(){
    var items = document.getElementsByName('item');
    for(var index in items)
    {
         showItem(items[index].id);
    }
};
showAllItems();
</script>

如何在ui：repeat中使用javascript getElementById？

2 个答案: