JavaScript - 多参数函数，它是多个图像库的字符串

JavaScript - multiple argument function, which is a string for multiple image gallery

本文关键字：图像 字符串 参数 函数 JavaScript      更新时间：2023-09-26

我有这样的函数，可以通过他的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'的地方使用调节 exp .

您可以定义常规类型，例如"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>

我有两个想法：首先，您可以添加类并使用类似

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

或者用你想要使用和用于每个喜欢的所有 id 制作数组

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

编辑：

也许你应该检查以下内容：在jQuery选择器上使用正则表达式根据id查找所有元素

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

<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);  
  }); 
}
相关文章：