Question

我需要一些基本的Javascript问题的方向。

我正在制作一个ejs页面来显示用户信息。

当我加载此页面时，我将'userList'数据作为数组。然后我把它们放入vUserList数组供将来使用。当调用函数'showUserInfo'时，我将信息放入文档中。

我有两个问题。

当我在同一个标签中使用循环和功能时，该功能根本不起作用。当我将循环和功能拆分为不同的标签时，两者都有效，但功能无法识别 vUserList数组。

如何让函数识别Array变量？

这是我的页面代码。

谢谢。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script>
        var vUserList = new Array();
        <% for (var i = 0; i < userList.length ; i++) { %>
            vUserList[<%=i %>] = new Array();
            vUserList[<%=i %>].googleUid = <%=userList[i].googleUid %>;
            vUserList[<%=i %>].googleName = <%=userList[i].googleName %>;
            vUserList[<%=i %>].memberUid = "<%=userList[i].memberUid %>";
            vUserList[<%=i %>].clientVersion = <%=userList[i].clientVersion %>;
            vUserList[<%=i %>].deviceId = <%=userList[i].deviceId %>;
            vUserList[<%=i %>].ticket = <%=userList[i].ticket %>;
            vUserList[<%=i %>].joinTime = <%=userList[i].joinTime %>;
            vUserList[<%=i %>].loginTime = <%=userList[i].loginTime %>;
            vUserList[<%=i %>].feni = <%=userList[i].feni %>;
            vUserList[<%=i %>].fuel = <%=userList[i].fuel %>;
            vUserList[<%=i %>].itemAttackCount = <%=userList[i].itemAttackCount %>;
            vUserList[<%=i %>].lastStation = <%=userList[i].lastStation %>;
            vUserList[<%=i %>].clearCount = <%=userList[i].clearCount %>;
            vUserList[<%=i %>].playLevel = <%=userList[i].playLevel %>;
            vUserList[<%=i %>].tutorial = <%=userList[i].tutorial %>;
            vUserList[<%=i %>].fuelChargeTime = <%=userList[i].fuelChargeTime %>;
            vUserList[<%=i %>].fuelTime = <%=userList[i].fuelTime %>;
            vUserList[<%=i %>].level = new Array();
            vUserList[<%=i %>].level = <%=userList[i].level %>;
        <% } %>
    </script>

    <script>
        function showUserInfo(idx) {
            alert(vUserList[0].memberUid);
            document.getElementById("googleUid").innerHTML=vUserList[idx].googleUid;
            document.getElementById("googleName").innerHTML=vUserList[idx].googleName;
            document.getElementById("memberUid").innerHTML=vUserList[idx].memberUid;
            document.getElementById("clientVersion").innerHTML=vUserList[idx].clientVersion;
            document.getElementById("deviceId").innerHTML=vUserList[idx].deviceId;
            document.getElementById("ticket").innerHTML=vUserList[idx].ticket;
            document.getElementById("joinTime").innerHTML=vUserList[idx].joinTime;
            document.getElementById("loginTime").innerHTML=vUserList[idx].loginTime;
            document.getElementById("feni").innerHTML=vUserList[idx].feni;
            document.getElementById("fuel").innerHTML=vUserList[idx].fuel;
            document.getElementById("itemAttackCount").innerHTML=vUserList[idx].itemAttackCount;
            document.getElementById("lastStation").innerHTML=vUserList[idx].lastStation;
            document.getElementById("clearCount").innerHTML=vUserList[idx].clearCount;
            document.getElementById("playLevel").innerHTML=vUserList[idx].playLevel;
            document.getElementById("tutorial").innerHTML=vUserList[idx].tutorial;
            document.getElementById("fuelChargeTime").innerHTML=vUserList[idx].fuelChargeTime;
            document.getElementById("fuelTime").innerHTML=vUserList[idx].fuelTime;
        }
    </script>



</head>
<body>
    <div id="header">
        <% include menubar.ejs %>
    </div>
    <div id="userList" vertical-align=bottom align=left>
        Here will be UserList from DB<br>
        <form method="post" action="/getUserList">
            memberUid<input type="text" name="memberUid"><br>
            LastStation<input type="text" name="startStation">~<input type="text" name="endStation"><br>
            Number of List <select name="limitNum">
                        <option value="10">10</option>
                        <option value="30">30</option>
                        <option value="50">50</option>
                    </select><br>
            <input type="submit" value="Search">
        </form>
        <% if (userList != null) {
            for (var i = 0; i < userList.length; i++) { %>
                <a href="#" onclick="showUserInfo(<%= i %>); return false;"><%= userList[i].memberUid %></a> <br>
                <% console.log(userList[i].memberUid) %>
        <% } } %>

    </div>
    <div align=center vertical-align=bottom>
        user Information. <br>
        googleUid : <p id="googleUid"></p>
        googleName : <p id="googleName"></p>
        memberUid : <p id="memberUid"></p>
        clientVersion : <p id="clientVersion"></p>
        deviceId : <p id="deviceId"></p>
        ticket : <p id="ticket"></p>
        joinTime : <p id="joinTime"></p>
        loginTime : <p id="loginTime"></p>
        feni : <p id="feni"></p>
        fuel : <p id="fuel"></p>
        itemAttackCount : <p id="itemAttackCount"></p>
        lastStation : <p id="lastStation"></p>
        clearCount : <p id="clearCount"></p>
        playLevel : <p id="playLevel"></p>
        tutorial : <p id="tutorial"></p>
        fuelChargeTime : <p id="fuelChargeTime"></p>
        fuelTime : <p id="fuelTime"></p>
    </div>

</body>
</html>

Answer 1

变量vUserList不在showUserInfo函数的范围内。您必须在函数范围内声明（var步骤）变量，因为javascript使用函数级别范围。您必须将所有代码放在单个脚本标记中。弄清楚为什么不起作用。我认为这只是一个格式问题。并将变量放在showUserInfo函数中。

肮脏的黑客可能会对你有用。从vUserList的声明中删除单词'var'。然后它会污染全局名称空间。但是你应该可以从窗口的任何地方访问它。不过，我不建议你走这条路。

Answer 2

只是评论（需要的空间），一些建议

在你正在做的第一个循环中：

var vUserList = new Array();
<% for (var i = 0; i < userList.length ; i++) { %>
    vUserList[<%=i %>] = new Array();
    vUserList[<%=i %>].googleUid = <%=userList[i].googleUid %>;
    vUserList[<%=i %>].googleName = <%=userList[i].googleName %>;
    ...

这将一个数组分配给 vUserList [i] ，然后将其视为一个Object。这是因为Arrays是Objects，但是它没有使用任何Array优点，所以你应该使用一个Object，并且它被认为更清晰使用文字而不是调用构造函数，所以：< / p>

  vUserList[<%=i %>] = {};
  ...

为了使事情更简洁，您可以使用如下文字：

    vUserList[<%=i %>] = { googleUid: <%=userList[i].googleUid %>,
                           googleName: <%=userList[i].googleName %,
                           ...
                           fuelTime: <%=userList[i].fuelTime %>,
                           level: [<%=userList[i].level %>]
                          };

另外，考虑为 showUserInfo 函数使用循环和数据数组：

function showUserInfo(idx) {
  var userData = ['googleUid','googleName','memberUid','clientVersion','deviceId',
    'ticket','joinTime','loginTime','feni','fuel','itemAttackCount','lastStation',
    'clearCount','playLevel','tutorial','fuelChargeTime','fuelTime'];

  userData.forEach(function(v) {
    document.getElementById(v).innerHTML = vUserList[idx][v];
  });
}

您可以对第一个循环应用类似的策略。

HTH。 ;-)

javascript函数无法识别同一文档中的变量

2 个答案: