从父级中单击时调用父级中的子元素
call child elements inside parent on click from within parent
如何在父元素中调用父元素 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 元素。
需要遍历到最近的父节点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>
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");
})
如何在父元素中调用父元素 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 元素。
需要遍历到最近的父节点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>
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");
})