jQuery.toggle() show data when clicked trigger

Question

I use the $.each to extract my data like this :

$.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];
        });

First, i hidden my data here :

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

Then i use this for show my detail :

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

But i have a problem... The detail data always show the first. enter image description here

Not the parent details of which should be.

I wanna like this every click the list : enter image description here

Always appears under the parent data . How do I fix it?

This question appears to be off-topic because it is about the common misconception that one can insert multiple elements with the same ID. — adeneo, Aug 30 '13 at 20:29
Can you help me provide a little help for this case? I've tried several ways but have not succeeded — Bertho Joris, Aug 30 '13 at 20:31
I have the ID data (data.id) of the results. How do I add it in order to help my case? — Bertho Joris, Aug 30 '13 at 20:39
@BerthoJoris you misunderstand, you are adding multiple list items with the same ID attribute, which is not valid HTML — Neil S, Aug 30 '13 at 20:40
@BerthoJoris this is not a javascript issue, you are iterating over your collection `allData`, and are appending elements to the DOM for each item. Those elements you are adding to the DOM should not have the same ID. I would suggest using a class instead. I am unfamiliar with lungojs, so I can't tell you exactly what to do, but appending multiple elements to the DOM with the same ID is definitely your problem. — Neil S, Aug 30 '13 at 20:48
@BerthoJoris The fact that you're inserting multiple list items with the same id attribute is causing you problems. No two elements can have the same ID. As Neil S said, you need to use a class for this, not an ID — Matthew Daly, Aug 30 '13 at 20:50
But if i use class, all the class with show.....not the list i click — Bertho Joris, Aug 30 '13 at 21:06

score 0 · Answer 1 · answered Aug 30 '13 at 20:51

0

change the the line where the

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

to something else so you can have different ids, for example

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

answered Aug 30 '13 at 20:51

Sam Battat

5,725
1
20
29

After the ID of different li, how do I show only the selected ID that list? – Bertho Joris Aug 31 '13 at 04:30

jQuery.toggle() show data when clicked trigger

1 Answers1