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

现在我用不同的 ID 多次播放了画廊脚本的代码 11 次：

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。我该怎么做？

我想使用正则表达式，但我的组合不起作用。我认为如果可以这样完成，那将是一个非常好的解决方案 - 在 'galleryID' 的位置使用正则表达式。

Answer 1

您可以定义一个通用类型，例如“ui-gallery”，并将类添加到您想将此事件绑定到的每个元素：

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

Answer 2

我有两个想法： 首先你可以添加类并使用like

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

或者用你想要使用的所有 id 制作数组并使用 forEach 像

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

编辑：

也许您应该检查以下内容： Find all elements based on ids using regex on jQuery selector

Answer 3

尝试使用这样的函数调用添加事件

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