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

该行：用类“容器”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 回答