Javascript 如何在foreach中调用函数？

我在小图片上添加了一个

eventListener

，当单击一张图片时，Photosweep会打开整个图库，但不会提醒打开

如果我在js文件末尾取消注释

//openphotosweep（）

，则加载页面时会出现Photosweep库，并且

eventListener

按预期工作。但那不是我想要的。。。 我是javascript新手。。。如能提供帮助和解释，将不胜感激

 function openPhotoSwipe() {

    var pswpElement = document.querySelectorAll('.pswp')[0];

    var pics =  Array.from(document.getElementsByTagName('img'));

    var items = []

    pics.forEach(function(e){
                    items.push({src: e.src, w: 0, h: 0});
                    })
    var options = {

        history: false,
        focus: false,
        showAnimationDuration: 0,
        hideAnimationDuration: 0,
        closeOnScroll: false,
        closeOnClick: false,

    };

    var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);

    gallery.listen('gettingData', function(index, item) {
      if (item.w < 1 || item.h < 1) {
        var img = new Image(); 
        img.onload = function() {
            item.w = this.width;
            item.h = this.height;
            gallery.invalidateCurrItems();
            gallery.updateSize(true);
        }
        img.src = item.src;
      }
    });

    gallery.init();
};


   var open = Array.from(document.getElementsByClassName("open_gallery"));

open.forEach(function(e){
    e.addEventListener('click', openPhotoSwipe);
})
// openPhotoSwipe();

函数openphotosweep（）{ var pswpement=document.querySelectorAll（'.pswp'）[0]； var pics=Array.from（document.getElementsByTagName（'img'）； 变量项=[] 图.forEach（函数（e）{ push（{src:e.src，w:0，h:0}）； }) 变量选项={ 历史：错， 焦点：错误， showAnimationDuration:0， hideAnimationDuration:0， closeOnScroll:错， closeOnClick:false， }; var gallery=新的Photosweep（pswpElement、Photosweepui_默认值、项目、选项）； gallery.listen（'gettingData'，函数（索引，项）{ 如果（项目w<1 | |项目h<1）{ var img=新图像（）； img.onload=函数（）{ 项目.w=此宽度； 项目h=此高度； 图库。失效库项（）； gallery.updateSize（true）； } img.src=item.src； } }); gallery.init（）； }; var open=Array.from（document.getElementsByClassName（“open_gallery”）； open.forEach（函数（e）{ e、 addEventListener（“单击”，打开Photosweep）； }) //openphotosweep（）； 以下是我的部分观点：

   <div class="container">

    <h1><%= @article.title %></h1>
    <p><%= @article.description %></p>

    <div class="thumb_images">
        <% @article.attachments.each do | art| %>

        <%= link_to image_tag art.url, class: "open_gallery" %>

        <% end %>
    </div>

</div>


<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

    <div class="pswp__bg"></div>

    <div class="pswp__scroll-wrap">


        <div class="pswp__container">
            <% @article.attachments.each do | art| %>
                <div class="pswp__item">
                    <%= image_tag art.url %>
                </div>
            <% end %>
        </div>


        <div class="pswp__ui pswp__ui--hidden">

            <div class="pswp__top-bar">

                <div class="pswp__counter"></div>

                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

                <button class="pswp__button pswp__button--share" title="Share"></button>

                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                        <div class="pswp__preloader__cut">
                        <div class="pswp__preloader__donut">
                        </div>
                    </div>
                    </div>
                </div>

            </div>

            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip">
                </div> 
            </div>

            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>

            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>

            <div class="pswp__caption">
                <div class="pswp__caption__center">
                </div>
            </div>

        </div>

    </div>

</div>

正如您在中确认的，我的猜测是正确的，您指向的链接基本上没有创建所需的HTML标记。所以我在这里把这个问题作为答案。按以下方式编写方法的链接：

<%= link_to "#", class: "open_gallery" do %>
  <%= image_tag art.url %>
<%end%>

但它在这个小例子中起作用。如果添加

console.log（open.length）

，你会看到什么？

console.log（open.length）

返回4（因为我在本文中有四幅图片）。你能把

链接写到
吗
？谢谢@ArupRakshit！你给了我更好的方法：）
工作得更好再次感谢你的宝贵帮助！我就是这样写的：
@NEL您可以将类保存在链接中，以。。。它仍然有效，试试看。我想这就是你的分数应该是多少，这样才能覆盖好点击区域。我试过了，但它打乱了我的风格。。（顺便说一句，我仍然可以创建另一个类）以您的方式编写它是更好的ruby方式还是“我的方式”？@NEL my way.）好在
a
标记中添加一个JS类，并在imgae中保持
打开_gallery
，然后进行样式设置。。反之亦然。。但我的建议是将事件处理程序挂接到
标记，而不是
img