通过按钮数组进行事件侦听器循环

Question

这是我的HTML和Javascript代码，基本上，如您目前所看到的，单击按钮时显示/隐藏3行图像。事实是，还有另外两行与此类似，我需要知道如何更改javascript代码以使show / hide东西对所有它们都起作用。我知道它与循环遍历按钮数组有关，但是我不了解Javascript。这是：

<style>
    .show-tapas{
        display: none;
    }
    .show-tapas.showing{
        display: block;
    }
</style>
        <div class="row">
            <div class="col-md-12">
                <div class="load-more-button">
                    <a href="#">Tapas</a>
                </div>
            </div>
        </div>
        <div class="row show-tapas">
            <div class="col-md-4 col-sm-6">
                <a href="images/menu_tapas_1_1.jpeg" data-lightbox="image-1"><div class="thumb">   
                    <div class="portfolio-item">  
                        <div class="image">
                            <img src="images/menu_tapas_1_0.jpeg">
                        </div>
                    </div>                 
                </a>
            </div> 
            <div class="col-md-4 col-sm-6">
                <a href="images/menu_tapas_2_1.jpeg" data-lightbox="image-1"><div class="thumb"> 
                    <div class="portfolio-item">
                        <div class="image">
                            <img src="images/menu_tapas_2_0.jpeg">
                        </div>
                    </div></div>
                </a>
            </div>
            <div class="col-md-4 col-sm-6">
                <a href="images/menu_tapas_3_1.jpeg" data-lightbox="image-1"><div class="thumb">
                    <div class="portfolio-item">
                        <div class="image">
                            <img src="images/menu_tapas_3_0.jpeg">
                        </div>
                    </div></div>
                </a>
            </div>
        </div>
<script>
    var a = document.querySelector('.load-more-button');
    var b = document.querySelector('.show-tapas');
    a.addEventListener("click",function(e){
        e.preventDefault
        b.classList.contains("showing") ? b.classList.remove("showing") : b.classList.add("showing");
    })
</script>

非常感谢！！

Answer 1

在此代码中，我只看到一行.show-tapas类。

无论如何，您应该使用querySelectorAll来获取每个匹配的项目。

var button = document.querySelector('.load-more-button');
var tapas = document.querySelectorAll('.show-tapas');
button.addEventListener("click",function(e){
    tapas.forEach(b => $(b).toggle());
})

提示：如果您有JQuery，则可以考虑使用$(b).toggle()而不是b.classList.contains("showing") ? b.classList.remove("showing") : b.classList.add("showing");