jQuery.toggle（）在单击触发器时显示数据

Question

我使用 $。each 来提取我的数据：

$.each(allData, function(i, data) {
        $('#data1').append(
        '<li class="thumb big">' +
            '<img src="http://'+data.img+'" />' +
            '<div>' +
                 '<span class="text tiny opacity">'+ dateFormat(data.fetch_date, "dd-mm-yyyy") +'</span>' +
                 '<strong>'+ data.judul +'</strong>' +
                 '<small>'+ data.desk +'</small>' +
            '</div>' +
            '<li id="readmore" style="display: none;">' +
                '<span class="text tiny">'+ data.desk +'</span>' +
            '</li>' +
        '</li>'
       );
  });
        var total = $('#data1 li').size();
        var classes = ['accept', 'cancel', 'warning', 'biru', 'ungu', 'kuning'];
        $('li').addClass(function(i, c) {
            return classes[i % classes.length];
        });

首先，我在这里隐藏了我的数据：

'<li id="readmore" style="display: none;">' +
      '<span class="text tiny">'+ data.desk +'</span>' +
'</li>' +

然后我用它来显示我的细节：

Lungo.dom('#now li').tap(function(event) {
    Lungo.dom('#now li').removeClass('light');
    Lungo.dom(this).toggleClass('light');
    $('#readmore').toggle();
});

但我有一个问题......详细数据总是显示第一个。

不应该是父级详细信息。

我希望每次点击列表都这样：

始终在下显示父数据。我该如何解决？

Answer 1

更改

所在的行

'<li id="readmore" style="display: none;">'

到其他东西，所以你可以有不同的ID，例如

'<li id="readmore-'+i+'" style="display: none;">'