0

だから私は動的に生成されたリンクのセットを持っています：

<a class="link"href="linkto/1" id="1">link 1</a>
<a class="link"href="linkto/2" id="2">link 2</a>
<a class="link"href="linkto/3" id="3">link 3</a>

次に、これらのリンクは、データのリストを返し、divにデータを入力するアクションを呼び出します（これもリンクのすぐ下で動的に生成されます）

<a class="link" href="linkto/1" id="1">link 1</a>
<div class="container" id="1"></div>
<a class="link" href="linkto/2" id="2">link 2</a>
<div class="container" id="2"></div>
<a class="link" href="linkto/3" id="3">link 3</a>
<div class="container" id="3"></div>

これは私のjqueryです

var url;
        var id;
        $('a.link').click(function () {
            url= $(this).attr('href');
            id = $(this).attr('id');
            $.ajax({
                url: url,
                dataType: 'JSON',
                success: function (data) {
                    var list = '';
                    var listcontainer = $('div.container').attr({ id: id.toString() });
                    $.each(data, function (i, client) {
                        list += '<div class="' + client.Id + '">Name of client = ' + client.Name + '</div>';
                    });
                    $(listcontainer).addClass("box-list-small");
                    $(listcontainer).html(list);
                },
                error: function (data) {
                    console.log('Cant load client list.');
                }
            });
            return false;
        });

だから私が達成しようとしているのは、リンクがあり、それがクリックされると、その下のボックスが開いてリストが表示されるということです。問題は、リンクをクリックするたびに、ページに「コンテナ」が表示されることです。それは理にかなっていますか？

時間を感謝します！

ありがとう！！

編集：修正された擬似コード。

<div class="row">
    <a class="link" href="linkto/1" id="1">link 1</a>
    <a class="someotherlink">someotherlink</a>
  </div>
 <div class="row">
    <div class="container" id="1"></div>
</div>
<div class="row">
    <a class="link" href="linkto/2" id="2">link 2</a>
    <a class="someotherlink">someotherlink</a>
</div>
<div class="row">
    <div class="container" id="2"></div>
</div>
<div class="row">
    <a class="link" href="linkto/3" id="3">link 3</a>
    <a class="someotherlink">someotherlink</a>
</div>
<div class="row">
    <div class="container" id="3"></div>
</div>
4

1 に答える 1

0

次の行：クラス「container」を持つすべてvar listcontainer = $('div.container').attr({ id: id.toString() });のdiv のDOMをクエリし、すべてのIDをクリックされたリンクのIDに設定し、divのコレクションをlistcontainer変数に返します。次に、それを呼び出して、すべてのコンテナを設定します。.html(list)

あなたはおそらくこのようなものが欲しいでしょう：

$('a.link').click(function () {
        var el = $(this),
            url= el.attr('href'),
            id = el.attr('id');
        $.ajax({
            url: url,
            dataType: 'JSON',
            success: function (data) {
                var list = '';
                $.each(data, function (i, client) {
                    list += '<div class="' + client.Id + '">Name of client = ' + client.Name + '</div>';
                });
                el.next('.container').addClass("box-list-small").html(list);
            },
            error: function (data) {
                console.log('Cant load client list.');
            }
        });
        return false;
    });
于 2012-08-20T02:37:29.200 に答える