JavaScript - Fonction argument multiple, qui est une chaîne pour plusieurs galerie d'images

Question

Je fonction comme ce qui permet à la galerie par son ID:

document.getElementById('galleryID').onclick = function (event) { 
     event = event || window.event; 
     var target = event.target || event.srcElement, 
      link = target.src ? target.parentNode : target, 
      options = {index: link, event: event}, 
      links = this.getElementsByTagName('a'); 
     bg.Gallery(links, options); 
    }; 

Mais le problème est quand j'ai plusieurs gallerys dans un seul document:

id="gallery01", id="gallery02", id="gallery03" ... jusqu'à id="gallery11".

Je multiplayed code de script galerie 11 fois avec différents ID:

document.getElementById('gallery01').onclick = function (event) { ... document.getElementById('gallery02').onclick = function (event) { ... document.getElementById('gallery03').onclick = function (event) { ...

jusqu'à ...

document.getElementById('gallery11').onclick = function (event) { ...

Je souhaite avoir un JS fonctionne pas 11. Comment est-ce que je peux faire ceci?

Je voudrais utiliser expressions régulières mais mes combinaisons ne fonctionnaient pas. Je pense que ce serait une très bonne solution si cela pouvait être fait comme ceci - en utilisant regullar exp en place où est 'galleryID'.

Answer 1

Essayez d'ajouter événement avec l'appel de fonction comme celui-ci

<div class="gallery" id="gallery1" onclick="getGalleryDetailFor(event)"> 
<div class="gallery" id="gallery2" onclick="getGalleryDetailFor(event)"> 

Edité

<script> 
function getGalleryDetailFor(event) 
{ 
    event = event || window.event; 
    var target = event.target || event.srcElement, 
    link = target.src ? target.parentNode : target, 
    options = {index: link, event: event}, 
    links = this.getElementsByTagName('a'); 
    bg.Gallery(links, options); 
} 
</script> 

Nouvelle Mise à jour

<div class="gallery" id="gallery1" onclick="getGalleryDetailFor('gallery1')">Gallery 1</div> 
<div class="gallery" id="gallery2" onclick="getGalleryDetailFor('gallery2')">Gallery 2</div> 

JavaScript

function getGalleryDetailFor(ids) 
{ 
    document.getElementById(ids).addEventListener('click',function (event) 
    { 
     event = event || window.event; 
     var target = event.target || event.srcElement, 
     link = target.src ? target.parentNode : target, 
     options = {index: link, event: event}, 
     links = this.getElementsByTagName('a'); 
     bg.Gallery(links, options); 
    }); 
} 

Answer 2

J'ai deux pense: D'abord, vous pouvez ajouter classe et utiliser comme

getElementsByClassName('gallery').forEach(function(galery){ 
     gallery.function (event) { ... 
    }) 

Ou faire tableau avec tous les id avec vous voulez utiliser et utiliser forEach comme

['id1','id2','id3'....].forEach(idName=>{ 
      document.getElementById(idName).onclick = function (event)   { ... 
    }) 

modifier:

mayby ​​vous devriez vérifier quelque chose comme: Find all elements based on ids using regex on jQuery selector

Answer 3

Vous pouvez définir un type général, par exemple "ui-gallery" et ajouter une classe à chacun des éléments que vous souhaitez lier cet événement à:

<div id="gallery1" class="ui-gallery"></div> 

<script> 
// with multiple handlers for different gallery elements 
var handlersPool = { 
    "default" => function(event) { ... }, 
    "gallery1" => function(event) { ... }, 
    "gallery2" => function(event) { ... }, 
    ... 
} 
var uiGalleries = document.getElementsByClassName("ui-gallery"); 
for (i = 0; i < uiGalleries.length; i++) { 
    var el = uiGalleries[i]; 
    el.onclick = handlersPool[el.id] || handlersPool.default; 
} 
</script>