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。forEachIE9以上です。

したがって、クライアント リストの各人物をテーブルに追加し、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>');
  });
});

JSフィドル

于 2013-09-26T19:57:03.103 に答える