Question

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

public class Header extends AbstractHeader {
}

当我单击详细信息按钮时，我希望详细信息div在卡片上弹出。我可以按照自己的意愿进行这项工作，但问题是该事件会立即在所有卡上触发，而不仅仅是我单击按钮时触发的事件。

这是点击的jQuery：

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

问题是您已将<Module a=params['a'] b=params['b'] c=params['c'] />定义为包含所有<Module {...params} /}元素的JQuery包装集，并且在每个事件处理程序中，您告诉整个集显示还是隐藏。

您需要做的是，在事件处理程序中，仅找到与单击的按钮相对应的df1 = new_df %>% filter(id == 'deroy') df2 = new_df %>% filter(id == 'mrroy') df3 = new_df %>% filter(id %in% c('mrroy', 'deroy'))元素。

overlay

details

details

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

您也可以这样使用，问题是您没有指出需要显示的详细信息块。

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

2 个答案: