0

我正在做一些让我头疼的事情，我似乎找不到任何与此相关的库。在我正在处理的 Web 应用程序中，我有一个包含 n 个人的列表，单击一个人的名字后，将生成一个由该人撰写的 n 篇文章的列表。我正在尝试使用 JavaScript 和 JSON 来完成此操作。

这就是我的 JSON 数据的结构方式：

var people = {
    'clients': [
        {
            'fname': 'joe',
            'lname': 'smith',
            'AFD': [
                {
                    'articleName': 'AFDArticle1byjoe'
                },
                {
                    'articleName': 'AFDArticle2byjoe'
                },
                {
                    'articleName': 'AFDArticle3byjoe'
                },
                {
                    'articleName': 'AFDArticle4byjoe'
                },
                {
                    'articleName': 'AFDArticle5byjoe'
                }
            ]
        },
        {
            'fname': 'jim',
            'lname': 'Hoff',
            'AFD': [
                {
                    'articleName': 'AFDArticle12byjim'
                }
            ]
        },
        {
            'fname': 'rick',
            'lname': 'Robinson',
            'AFD': [
                {
                    'articleName': 'AFDArticle5byrick'
                }
            ]
        },
        {
            'fname': 'sarah',
            'lname': 'Ross',
            'AFD': [
                {
                    'articleName': 'AFDArticle20bysarah'
                }
            ]
        },
        {
            'fname': 'jack',
            'lname': 'jones',
            'AFD': [
                {
                    'articleName': 'AFDArticle9byjack'
                }
            ]
        }
    ]
};

每个人都有名字、姓氏和 n 个 AFD 文章的列表。

此代码将很好地列出来自上面 JSON 示例的 HTML 表中的 n 人的数量：

<table border="1">
<script>
for (var i=0;i<people.clients.length;i++)
{

    $("#tabX").append("<tr><td>"+people.clients[i].fname+"</td></tr>");

}
</script>
</table>

所以我会在表格中得到一些不错的名字输出，如下所示：“joe jim rick sarah jack”

所以点击“joe”，就会生成一个Joe文章的数据表。我已经可以这样做了：

<table border="1">
<script>
    for (var i=0;i<people.clients.length;i++)
    {
        $("#tabX").append("<tr><td>"+people.clients[ selectedClient ].AFD[i].articleName+"</td></tr>");
    }
</script>
</table>

其中“selectedClient”是当前选择的客户端，AFD 文章将按如下方式生成：AFD Article 1 by joe, ... , AFD Article 4 by joe。

所以最后！我有一些问题可以真正帮助我解决这个问题。单击某人的姓名后如何更改 selectedClient 的值？这可以通过执行如下函数来完成吗？

$("#tabX").append("<tr><td><a href="javascript:selectName();">" +people.clients[i].fname+ "</a></td></tr>");
4

2 回答 2

1

我认为你在正确的轨道上。可能这样的事情会有所帮助：

$("#tabX").append("<tr><td><a href=\"javascript:;\" onclick=\"javascript:selectName("+i+");\">" +people.clients[i].fname+ "</a></td></tr>");

然后这将是您的 selectName 函数：

function selectName (idx)
{
  selectedClient = idx;
}
于 2013-09-26T19:45:10.377 回答
0

这是我将如何处理它。

我假设以下 HTML：

<table id="people"></table>
<div id="articles"></div>

以及以下 Javascript。forEach是IE9及以上。

因此，对于您的客户列表中的每个人，将他们添加到表中，确保您将dataid 设置为 JS 对象中该客户的索引，并包含一个类名。

people.clients.forEach(function(el, i) {
   $('#people').append('<tr><td data-id="' + i + '" class="name">' + el.fname + '</td></td>');
});

然后，当您单击具有name类名的元素时，从 data 属性中获取 id，使用 id 遍历该客户端的 AFD，并将它们附加到 div（或您选择的元素）。这进一步假设在您列出客户和开始单击他们的名称之间，您没有对人员对象进行排序，否则索引（ID）将完全不正常。

$('.name').click(function() {
  var id = $(this).data('id');
  people.clients[id].AFD.forEach(function(el, i){
    $('#articles').append('<div>' + el.articleName + '</div>');
  });
});

JSfiddle

于 2013-09-26T19:57:03.103 回答