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

Posted 2023-05-07

【中文标题】在 InnerHTML 页面加载时更新的简单 JavaScript 循环

【英文标题】：Simple JavaScript Loop which updates on InnerHTML Page Load

【发布时间】：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 实际上，虽然我同意问题不清楚，但知道价值与问题的核心无关。

【参考方案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，而不是连接到它。