从父级中单击时调用父级中的子元素

Question

如何在父元素中调用父元素 onclick？

例如，我在一个页面上有多个这样的内容

<div class="parent">
    <div class="some-text">text</div>
    <div class="some-image">image</div>
    <div class="some-btn">btn</div>
</div>
<div class="parent">
    <div class="some-text">text</div>
    <div class="some-image">image</div>
    <div class="some-btn">btn</div>
</div>
<div class="parent">
    <div class="some-text">text</div>
    <div class="some-image">image</div>
    <div class="some-btn">btn</div>
</div>

当我单击 .some-btn 时，我只希望它发生在那个 .parent 元素上，其中 .some-btn 是 child/clicked。

我的 jquery 现在看起来像这样

$(".some-btn").click(function() {
    $(".some-text").toggleClass("active",1000,"easeInOutQuad");
    $(".some-image").toggleClass("active",1000,"easeInOutQuad");
    $(".some-btn").toggleClass("active");
})

但这当然会激活所有 .parent 元素。

Answer 1

需要遍历到最近的父节点div，然后在其中查找元素：

$(".some-btn").click(function() {
  var _this = $(this);
  var closestparent = _this.closest('.parent')
  closestparent.find(".some-text,.some-image").toggleClass("active",1000,"easeInOutQuad");
 _this.toggleClass("active");
});

 $(".some-btn").click(function() {
      var _this = $(this);
      var closestparent = _this.closest('.parent')
      closestparent.find(".some-text,.some-image").toggleClass("active",1000,"easeInOutQuad");
      _this.toggleClass("active");
    });

.active{
color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="parent">
    <div class="some-text">text</div>
    <div class="some-image">image</div>
    <div class="some-btn">btn</div>
</div>
<div class="parent">
    <div class="some-text">text</div>
    <div class="some-image">image</div>
    <div class="some-btn">btn</div>
</div>
<div class="parent">
    <div class="some-text">text</div>
    <div class="some-image">image</div>
    <div class="some-btn">btn</div>
</div>

Answer 2

Select被点击元素的父元素然后select在这个元素里面：

$(".some-btn").click(function() {
    var that = $(this);
    var par = that.closest('.parent');
    par.find(".some-text").toggleClass("active",1000,"easeInOutQuad");
    par.find(".some-image").toggleClass("active",1000,"easeInOutQuad");
    that.toggleClass("active");
})

从父级中单击时调用父级中的子元素

call child elements inside parent on click from within parent

jquery

onclick

parent

toggleclass