单击以显示带有Javascript的div

我在我的网站上有一个页面，其中我显示了一块内容，并为用户提供了单击“查看更多”以显示更多内容的选项

这是我目前的工作

HTML:

有人能给我一些关于如何为category36SeeMore创建函数的建议吗？这样它就可以显示所有类别为category36的div吗？

在category36SeeMore上单击，您可以首先获取其id，然后从中替换SeeMore，如下所示：

const id = this.id.replace('SeeMore', '')

因此，您可以从中获得实际的类名category36。然后，您可以使用以下方法查找该类的所有元素：

document.querySelectorAll('.' + id)

最后使用.forEach，将所有元素的显示样式更改为block，以使所有元素再次可见

演示：

const btn=document.getElementByIdCategory 36参见更多； btn.addEventListenerclick，函数E{ e、 防止违约； const id=this.id.replace'SeeMore'， document.querySelectorAll'.+id.forEachel=>el.style.display='block' }; .类别36{ 保证金：5px； 填充：.5rem； 盒影：2px2p5pRGBA0,0,0,0.03； 边界半径：4px； 背景：天蓝色； 边框底部：1px实心F9F2D6； 右边框：1px实心F9F2D6； }

测验 测验 测验 测验 您可以使用jquery

---

这回答了你的问题吗@谢谢你的回复。有没有可能应用它，让它命中所有具有类名的div元素？这太棒了。非常感谢：-哇，太好了。谢谢：

document.querySelectorAll('.' + id)

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function(){
    $("#category36SeeMore").click(function(){
        $(".category36").css('display','block');
    });
});
</script>