时间戳

首页 > 解决方案 > 单击事件仅在类的一个元素上触发

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>

当我单击详细信息按钮时，我希望详细信息 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)'
  });
});

标签： javascriptjqueryonclickclick

解决方案

问题是您已定义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>

推荐阅读