1

我正在使用 迭代项目列表<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';
}
4

2 回答 2

2

尝试这样做：

<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 包装在脚本标记中，它们都在全局范围内，因此在循环的每次迭代中都相互覆盖。

为了给每个脚本块它自己的范围，您可以将变量包装在这样的自执行函数中，但是按照您当前的逻辑，这似乎有点矫枉过正：

<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>
于 2012-11-30T01:15:34.710 回答
1

您可以使用“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>
于 2012-11-30T02:45:17.037 回答