JavaScript - многофункциональный аргумент, который является строкой для галереи множественного изображения

Question

У меня есть функция, как это, что позволяет галерею его 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); 
    }; 

Но проблема в том, когда у меня есть несколько ГАЛЕРЕЙ в одном документе:

id="gallery01", id="gallery02", id="gallery03" ... до id="gallery11".

Теперь я multiplayed код галереи сценария 11 раз с разными ID:

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

до ...

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

Я хотел бы иметь один Функция JS не 11. Как я могу это сделать?

Я хотел был бы использовать регулярные выражения, но мои комбинации не сработали. Я думаю, это было бы очень приятное решение, если бы это можно было сделать так: используя regullar exp на месте, где находится 'galleryID'.

Answer 1

Попробуйте добавить событие с вызовом функции, как этот

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

Отредактировано

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

Новое усовершенствованное

<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

У меня есть два думает: Сначала вы можете добавить класс и использовать как

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

Или сделать массив со всеми ид с вы хотите использовать и использовать Foreach как

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

редактирования:

возможно, вы должны проверить somthing как: Find all elements based on ids using regex on jQuery selector

Answer 3

Вы можете определить общий тип, например «ui-gallery», и добавьте класс к каждому из элементов, которые вы хотите связать с этим событием, с: