在 InnerHTML 页面加载时更新的简单 JavaScript 循环答案

【问题标题】：Simple JavaScript Loop which updates on InnerHTML Page Load在 InnerHTML 页面加载时更新的简单 JavaScript 循环
【发布时间】：2012-10-20 01:22:26
【问题描述】：

当页面加载时，我想生成一个 JavaScript 循环。项目总数取决于页面上已有的 PHP 字符串。

<script type="text/javascript">

function Generation(){
    var loopTotal = <?=$TotalNumberOfRows?>;
    var innerToUpdate=$("#loopItemSet");

    var page=0;
    for (var i=0;i<=<?=$TotalNumberOfRows?>;i+=24)
    {
        page++;
        // document.write(i);
        innerToUpdate.innerHTML="<a href='link.php?go="+i+"'> page number "+page+"</a>";
    }       
}

$(document).ready(function(){
    Generation();   
});

</script>

它应该从 24 开始返回三个链接，进入 52，3 次。

【问题讨论】：

你忘了告诉我们$TotalNumberOfRows的值是什么。
@Jasper，据我了解，这是一个动态创建的数字。
@FrankB，是的，但他没有告诉我们问题出在哪里，而是在喃喃自语一些数字，如果不是所有数字都已知，这将毫无意义
24 变成 52 三倍？不，24 * 3 = 72。
@jasper 实际上，虽然我同意问题不清楚，但知道价值与问题的核心无关。

标签： javascript jquery loops for-loop innerhtml

【解决方案1】：

此行会在每次迭代中覆盖您元素的innerHTML。您可以像这样简单地添加+：

innerToUpdate.innerHTML += "<a href='link.php?go="+i+"'> page number "+page+"</a>";

或先收集一个字符串中的所有条目，然后只更新该元素的 HTML 内容一次：

    function Generation(){
        var loopTotal = <?=$TotalNumberOfRows?>;
        var innerToUpdate=$("#loopItemSet");
        // var innerToUpdate=$(".loopItemSet"); // for multiple elements.

        var page=0, content = '';
        for (var i=0;i<=<?=$TotalNumberOfRows?>;i+=24)
        {
            page++;
            // document.write(i);
            content += "<a href='link.php?go="+i+"'> page number "+page+"</a>";
        }
        innerToUpdate.html( content );
    }

^{我用 jQuery 的 html() 替换了你对 innerHTML 的调用。在我看来，如果您使用 jQuery，请在需要的地方使用它。}

【讨论】：

如果我有更多 <div id="loopItemSet"> 上的内容，我该怎么做才能插入到页面上的所有内容？
@TheBlackBenzKid id 表示唯一，因此您不应拥有该 id 的多个元素。改用例如class。然后只需选择所有这些元素并为每个元素调用html()。

【解决方案2】：

你想使用 jQuery 的 append

而不是这个：

    innerToUpdate.innerHTML="<a href="link.php?go="+i+""> page number "+page+"</a>";

试试这个：

    innerToUpdate.append('<a href="link.php?go='+i+'"> page number '+page+'</a>');

检查该行中的引号，我编辑了一些嵌套严重的双引号。

【讨论】：

【解决方案3】：

问题尚不清楚，但我假设您只获得一个链接而不是 3 个，并且想知道原因。在这里：

    for (var i=0;i<=<?=$TotalNumberOfRows?>;i+=24)
    {
        page++;
        // document.write(i);
        innerToUpdate.innerHTML="<a href='link.php?go="+i+"'> page number "+page+"</a>";
    }

应阅读：

  for (var i=0;i<=<?=$TotalNumberOfRows?>;i+=24)
        {
            page++;
            // document.write(i);
            innerToUpdate.innerHTML+="<a href='link.php?go="+i+"'> page number "+page+"</a>";
        }

您当前的代码每次都重置 html，而不是连接到它。

【讨论】：