Attributi dati personalizzati con più elementi

Question

Sto cercando di creare attributi di dati personalizzati sul mio sito Web in lightbox. L'ho appena creato per un elemento in Javascript e funziona bene, ma voglio farlo funzionare in più elementi.

Come funziona ora: Ho un elemento "a" con id = "image-1" e voglio fare in modo che javascript riconosca id immagine-2,3,4 ... e mostri i dati corretti da attributi personalizzati. Nota che non posso usare onclick perché fa in modo che la lightbox smetta di funzionare.

Ecco HTML:

<div class="col-xs-12 col-sm-4 col-md-3 col-lg-3"> 
    <div class="thumbnail grid-wrapper thumbnail-single"> 
     <a id="image-1" href="img/photo2.jpeg" data-tags="<li>t31232est</li> <li>test</li>" data-fb="http://test1.pl" data-tt="http://test2.pl" data-gplus="http://te23432st3.pl" data-lightbox="roadtrip" data-title="This is a caption. This is a caption This is a caption This is a caption"><img src="img/photo2.jpeg" class="img-responsive" alt="..."></a> 
    </div> 
</div> 
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-3"> 
    <div class="thumbnail grid-wrapper thumbnail-single"> 
     <a id="image-2" href="img/photo3.jpg" data-tags="<li>test</li> <li>test</li>" data-fb="http://test55.pl" data-tt="http://test253342.pl" data-gplus="http://tes32423t3.pl" data-lightbox="roadtrip" data-title="This is a caption. This is a caption This is a caption This is a caption"><img src="img/photo3.jpg" class="img-responsive" alt="..."></a> 
    </div> 
</div> 

Ecco JS:

var global = document.getElementById('image-1'); 
var tagList = global.getAttribute('data-tags'); 
var facebook = global.getAttribute('data-fb'); 
var twitter = global.getAttribute('data-tt'); 
var gplus = global.getAttribute('data-gplus'); 

$('<div id="lightboxOverlay" class="lightboxOverlay"></div><div id="lightbox" class="lightbox"><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" /><div class="lb-nav"><a class="lb-prev" href="" ></a><a class="lb-next" href="" ></a></div><div class="lb-loader"><a class="lb-cancel"></a></div></div></div><div class="lb-dataContainer"><div class="lb-data"><div class="lb-details"><ul class="tag-list">' + tagList +'</ul><br/><span class="lb-caption"></span><span class="lb-number"></span></div><div class="lb-closeContainer">' + 
     '<ul class="social-list"><li><a href="' + facebook + '"><img src="img/fb_circle_white.png" class="img-responsive"></a></li><li><a href="' + twitter + '"><img src="img/tt_circle_white.png" class="img-responsive"></a></li><li><a href="' + gplus + '"><img src="img/gplus_circle_white.png" class="img-responsive"></a></li></ul><a class="lb-close"></a></div></div></div></div>').appendTo($('body')); 

io sto cercando di fare funziona su ID Plugin (http://lokeshdhakar.com/projects/lightbox2/)

UPDATE

Ho appena usato la funzione in oncli ck e quando lo sto testando, mostra gli ID corretti. Ma non è ancora possibile inserirlo in getElementByID come stringa.

id="image-1" onclick="GetID(this.id)" 

window.GetID = function(elem_id){ 
    alert(elem_id); 
    } 

    var global = document.getElementById(GetID()); 
    var tagList = global.getAttribute('data-tags'); 
    var facebook = global.getAttribute('data-fb'); 
    var twitter = global.getAttribute('data-tt'); 
    var gplus = global.getAttribute('data-gplus'); 

UPDATE 2:

quasi fatto. Ho reso globali le mie variabili. Il log della console mostra l'ID corretto e altri attributi di dati. Il problema è quando sto cercando di inserire i risultati in html in javascript. Ecco un esempio.

<ul class="social-list"><li><a href="' + facebook + '"><img src="img/fb_circle_white.png" class="img-responsive"></a></li> 

+ JS attuali:

id="image-1" onclick="window.GetID(this.id)" 

    var global; 
    var tagList; 
    var facebook; 
    var twitter; 
    var gplus; 

    window.GetID = function(elem_id){ 
    console.log(elem_id); 
    global = document.getElementById(elem_id); 
    console.log(global); 
    tagList = global.getAttribute('data-tags'); 
    console.log(tagList); 
    facebook = global.getAttribute('data-fb'); 
    console.log(facebook); 
    twitter = global.getAttribute('data-tt'); 
    console.log(twitter); 
    gplus = global.getAttribute('data-gplus'); 
    console.log(gplus); 
    } 

+ immagine di risposta console.

Answer 1

Una buona soluzione sarebbe quella di ottenere l'attributo id di 'un' elemento quando si fa clic si mise in un var e usarlo per ottenere gli attributi dei dati.

Supponendo 'a' elementi sono all'interno di un '#container' div Ecco la mia soluzione

$('#container a').click(function(){ 
    var image_id = '#' + $(this).attr('id'); 
    var tagList  = $(image_id).data('tags'); 
    var facebook = $(image_id).data('fb'); 
    var twitter  = $(image_id).data('tt'); 
    var gplus  = $(image_id).data('gplus'); 
}); 

Answer 2

non so se sto capendo correttamente. Ma se l'id dei div è consistente, ovvero image-1, image-2, image-3, ... e così via, è possibile usare ed espressioni selector e scorrere il numero di elementi in quella matrice per aggiungere/aggiungere il tuo html dinamico all'interno di quelle div senza l'utilizzo di un evento click per ottenere l'id. Ex -

var array_of_divs = $("div[id^=image-]") // this gives you an array of all the element having the id starting with 'image-' 

Inoltre è possibile anello anche se la lunghezza di questo array e aggiungere il HTML dinamico in base all'ID del genitore: ("image-"+counter_variable])

fatemi sapere se questo aiuta.