单击事件仅在 class 的一个元素上触发

Question

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

 <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>

当我单击详细信息按钮时，我希望详细信息 div 弹出卡片。我按照自己的意愿进行了此操作，但问题是该事件会同时触发所有卡片，而不仅仅是我从中单击按钮的卡片。

这是点击的 jQuery：

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)'
  });
});

Answer 1

问题是您已将 overlay 定义为包含所有 details 元素的 JQuery 包装集，并且在每个事件处理程序中，您告诉整个集显示或隐藏。

您需要做的是，在事件处理程序中，只找到与被单击的按钮对应的 details 元素。

var overlayToggle = $('.overlay-toggle');
var overlayClose = $('.close-overlay');

overlayToggle.on('click', (e) => {

  e.preventDefault();
   // Find the .details within nearest ancestor that is .card
   $(".details", $(e.target).closest(".card")).css({
    'visibility': 'visible',
    'opacity': '1',
    'transform': 'scale(1)'
  });
});

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

.details { visibility:hidden; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
<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>
  <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>

Answer 2

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)'
  });
});

你也可以这样使用，问题是你没有指出你需要显示哪个细节块。

单击事件仅在 class 的一个元素上触发

Click event to fire only on one element of a class

javascript

jquery

click

onclick