एकाधिक तत्वों के साथ कस्टम डेटा विशेषता

Question

मैं अपनी वेबसाइट पर लाइटबॉक्स में कस्टम डेटा विशेषताओं को बनाने की कोशिश कर रहा हूं। मैंने इसे जावास्क्रिप्ट में एक तत्व के लिए बनाया है और यह ठीक काम करता है लेकिन मैं इसे कई तत्वों में काम करना चाहता हूं।

यह अब कैसे काम करता है: मेरे पास id = "image-1" वाला "ए" तत्व है और मैं यह जावास्क्रिप्ट आईडी छवि-2,3,4 पहचानना चाहता हूं ... और सही डेटा दिखाता हूं कस्टम विशेषताओं। ध्यान दें कि मैं ऑनक्लिक का उपयोग नहीं कर सकता क्योंकि यह बनाता है कि लाइटबॉक्स काम बंद कर देता है।

<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> 

यहाँ जेएस है:

यहाँ HTML है

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')); 

मैं इसे लाइटबॉक्स प्लगइन पर काम करता है (http://lokeshdhakar.com/projects/lightbox2/)

अद्यतन

बनाने के लिए कोशिश कर रहा हूँ

मैंने अभी ऑनक्ली में फ़ंक्शन का उपयोग किया था सीके और जब मैं इसका परीक्षण कर रहा हूं, तो यह सही आईडी दिखाता है। लेकिन अभी भी इसे स्ट्रिंग के रूप में getElementByID में नहीं डाल सकता है।

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'); 

अद्यतन 2:

लगभग हो गया। मैंने अपने चर वैश्विक बना दिया है। कंसोल लॉग सही आईडी और अन्य डेटा अटारी दिखाता है। समस्या यह है कि जब मैं जावास्क्रिप्ट में एचटीएमएल में परिणाम डालने की कोशिश कर रहा हूं। यहां उदाहरण है।

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

+ वर्तमान जे एस:

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); 
    } 

+ सांत्वना प्रतिक्रिया की छवि।

Answer 1

एक अच्छा समाधान 'एक' तत्व की आईडी गुण जब क्लिक करने से वह एक वर में रख और उसका उपयोग डेटा का श्रेय प्राप्त करने के लिए होगा।

मान लिया जाये कि 'एक' तत्व एक div '#container' के अंदर हैं यहां मेरे समाधान

$('#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

सुनिश्चित नहीं हैं कि मैं सही ढंग से समझ रहा हूँ। लेकिन यदि divs की आईडी सुसंगत है, जिसका अर्थ है छवि -1, छवि -2, छवि -3, ... और इसी तरह, आप उस सरणी में तत्वों की संख्या को जोड़ने/जोड़ने के लिए चयनकर्ता और लूप का उपयोग और अभिव्यक्ति कर सकते हैं आईडी प्राप्त करने के लिए एक क्लिक ईवेंट का उपयोग किए बिना उन divs के अंदर अपने गतिशील एचटीएमएल। पूर्व -

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

आगे आप कर सकते हैं पाश हालांकि इस सरणी की लंबाई और माता पिता की आईडी के आधार पर अपनी गतिशील एचटीएमएल जोड़ें: ("image-"+counter_variable])

मुझे पता है कि अगर यह मदद करता है।