Javascript 单击事件仅在类的一个元素上激发

我有这样的卡片布局，每张卡片都有这样的标记：

 <div class="card">
  <div class="content">
    <div class="brand">
      <img src="/assets/logo.png" alt="">
    </div>
    <div class="name">
      <h3>Lorem ipsum</h3>
    </div>
    <div class="price">
      25€/year
    </div>
    <div class="buttons">
      <a href="#" class="btn btn-color">Buy</a>
      <a href="#" class="btn btn-ghost overlay-toggle">Details</a>
     </div>
    </div>
    <div class="details">
             ...Details here...
    </div>
  </div>

---

问题在于，您已经将

覆盖

定义为一个JQuery包装集，其中包含所有

详细信息

元素，并且在每个事件处理程序中，您告诉整个集合显示或隐藏

您需要做的是，在事件处理程序中，仅查找与单击的按钮对应的

详细信息
元素


var overlayToggle=$（'.overlay-toggle'）；
var overlayClose=$（'.close overlay'）；
在（'点击'，（e）=>{
e、 预防默认值（）；
//在最近的祖先（即.card）中查找.details
$（“.details”，$（e.target.closest（“.card”）.css({
“可见性”：“可见”，
“不透明度”：“1”，
“变换”：“比例（1）”
});
});
overcyclose.on（'单击'，（）=>{
overlay.css({
“可见性”：“隐藏”，
“不透明度”：“0”，
“转换”：“比例（0）”
});
});
.details{可见性：隐藏；}

乱数假文
25欧元/年
…详细信息在这里。。。
乱数假文
25欧元/年
…详细信息在这里。。。
乱数假文
25欧元/年
…详细信息在这里。。。

您也可以这样使用，问题是您没有指出需要显示哪个详细信息块
 谢谢你的回答，这正是我想要它做的。很高兴帮助你：）
var overlayToggle = $('.overlay-toggle');
var overlayClose = $('.close-overlay');
var overlay = $('.details');

overlayToggle.on('click', (e) => {
  e.preventDefault();
  overlay.css({
    'visibility': 'visible',
    'opacity': '1',
    'transform': 'scale(1)'
  });
});

overlayClose.on('click', () => {
  overlay.css({
    'visibility': 'hidden',
    'opacity': '0',
    'transform': 'scale(0)'
  });
});

overlayToggle.on('click', (e) => {
  e.preventDefault();
  $(e.target).parents('.card').find('.details').css({
    'visibility': 'visible',
    'opacity': '1',
    'transform': 'scale(1)'
  });
});
overlayClose.on('click', () => {
  e.preventDefault();
  $(e.target).parents('.card').find('.details').css({
    'visibility': 'hidden',
    'opacity': '0',
    'transform': 'scale(0)'
  });
});