点击info按钮触发所有模态框，如何仅触发当前div内的对应模态框？

问题原因 #

你现有代码中直接使用$('.modal')选择器会匹配页面内所有带有modal类的元素，因此点击任意按钮时所有模态框都会同步切换类状态，无法匹配对应按钮所属的模态框。

解决方法 #

修改点击事件内的选择器逻辑，仅匹配当前点击按钮对应的模态框即可，有两种常用写法：

1. 适配你当前DOM结构（模态框和按钮为同级节点），直接查找按钮的同级模态框：

$('.info-btn').click(function () {
  $(this).siblings('.modal').toggleClass('open');
});

2. 容错性更高的写法，不受DOM层级调整影响，先定位按钮所属的box容器再查找内部模态框：

$('.info-btn').click(function () {
  $(this).closest('.box').find('.modal').toggleClass('open');
});

内容的提问来源于stack exchange，提问作者Ben