在单击特定子项时,应运行不同的jQuery

Question

我开发了一个用户界面,您将点击它会弹出的卡片,但在该卡片内部有两个链接,当我点击它时不应该回弹.我知道这些链接是该卡的一部分,我在卡选择器上放了一个事件.

所以我想实现这个场景:

当用户点击卡片时,无论在哪里......它应该弹出...(它现在正在做)但是当用户点击这两个链接时它不应该弹出...它应该显示我将自己处理的标签...只需要一种不应该点击这些链接的方式,因为我想触发另一个事件来显示这些链接上的标签.

我尝试过,:not但它对我不起作用.

var card = $('.card');

card.click(function() {
  if ($(this).hasClass('gravitate')) {
    $(this).removeClass('gravitate');
    $(this).addClass('levitate');
  } else {
    $(this).addClass('gravitate');
    $(this).removeClass('levitate');
  }

});

* {
  padding: 0;
  margin: 0;
}

body {
  padding: 30px;
}

.card {
  border: #ececec 1px solid;
  padding: 10px;
  width: 200px;
  margin-bottom: 10px;
}

.tab-pane {
  display: none;
}

.transition {
  transition: all 500ms
}

.gravitate {
  box-shadow: 0 0 18px 3px rgba(0, 0, 0, 0);
  width: 200px;
  transform: translate(0, 0);
}

.levitate {
  box-shadow: 0 0 18px 3px rgba(0, 0, 0, 0.3);
  width: 220px;
  transform: translate(-10px, 5px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card gravitate transition">
  <h4>Sample Card</h4>
  <a href="#" class="tab" data-tab="first-name">First Name</a> | <a href="#" class="tab" data-tab="last-name">Last Name</a>
  <div class="tab-pane first-name">Omer</div>
  <div class="tab-pane last-name">Hussain</div>
</div>
<div class="card gravitate transition">
  <h4>Sample Card</h4>
  <a href="#" class="tab" data-tab="first-name">First Name</a> | <a href="#" class="tab" data-tab="last-name">Last Name</a>
  <div class="tab-pane first-name">Usman</div>
  <div class="tab-pane last-name">Ali</div>
</div>

Answer 1

您可以向链接添加一个事件处理程序，以检查父卡是否具有 levitate 类，如果有，则阻止 click 事件在 DOM 中冒泡并触发其他事件处理程序：

$('a.tab').click(function(e) {
  if ($(this).parent().hasClass('levitate')) {
    e.stopPropagation();
  }
})

$('a.tab').click(function(e) {
  if ($(this).parent().hasClass('levitate')) {
    e.stopPropagation();
  }
})

var card = $('.card');

card.click(function() {
  if ($(this).hasClass('gravitate')) {
    $(this).removeClass('gravitate');
    $(this).addClass('levitate');
  } else {
    $(this).addClass('gravitate');
    $(this).removeClass('levitate');
  }

});

$('a.tab').click(function(e) {
  if ($(this).parent().hasClass('levitate')) {
    e.stopPropagation();
  }
})

* {
  padding: 0;
  margin: 0;
}

body {
  padding: 30px;
}

.card {
  border: #ececec 1px solid;
  padding: 10px;
  width: 200px;
  margin-bottom: 10px;
}

.tab-pane {
  display: none;
}

.transition {
  transition: all 500ms
}

.gravitate {
  box-shadow: 0 0 18px 3px rgba(0, 0, 0, 0);
  width: 200px;
  transform: translate(0, 0);
}

.levitate {
  box-shadow: 0 0 18px 3px rgba(0, 0, 0, 0.3);
  width: 220px;
  transform: translate(-10px, 5px);
}