Javascript jquery仅将类添加到此元素内的元素
这是针对用户帐户的。当用户点击编辑按钮时,我希望在按钮所在的元素内显示一个编辑框 所以我有这个标记Javascript jquery仅将类添加到此元素内的元素,javascript,jquery,Javascript,Jquery,这是针对用户帐户的。当用户点击编辑按钮时,我希望在按钮所在的元素内显示一个编辑框 所以我有这个标记 <div class="col account"> <strong>Account Settings</strong> <div class="col"> <span>Profile Status</span> <p><?= $t
<div class="col account">
<strong>Account Settings</strong>
<div class="col">
<span>Profile Status</span>
<p><?= $this->escape($this->status); ?></p>
<button class="edit-btn"><i class="fa fa-pencil" aria-hidden="true"></i></button>
<div class="edit-box">
edit 1
</div>
</div>
<div class="col">
<span>Name</span>
<p> <?= $this->escape($this->name); ?></p>
<button class="edit-btn"><i class="fa fa-pencil" aria-hidden="true"></i></button>
<div class="edit-box">
edit 2
</div>
</div>
<div class="col">
<span>Username</span>
<p><?= $this->escape($this->username); ?></p>
<button class="edit-btn"><i class="fa fa-pencil" aria-hidden="true"></i></button>
<div class="edit-box">
edit 3
</div>
</div>
<div class="col">
<span>Bio</span>
<p><?= $this->escape($this->bio); ?></p>
<button class="edit-btn"><i class="fa fa-pencil" aria-hidden="true"></i></button>
<div class="edit-box">
edit 4
</div>
</div>
<div class="col">
<span>Email</span>
<p><?= $this->escape($this->email); ?></p>
<button class="edit-btn"><i class="fa fa-pencil" aria-hidden="true"></i></button>
<div class="edit-box">
edit 5
</div>
</div>
<div class="col">
<span>Password</span>
<p>**********</p>
<button class="edit-btn"><i class="fa fa-pencil" aria-hidden="true"></i></button>
<div class="edit-box">
edit 6
</div>
</div>
</div>
</div>
是否有方法仅将类添加到与.edit btn位于同一.col中的.edit框中
这是一个js提琴是的,您可以使用
.sibles('.edit box')
将该类添加到已单击按钮的同级对象:
$(document).ready(function() {
$('.edit-btn').click(function() {
$(this).siblings('.edit-box').addClass('open');
});
});
啊,谢谢,我知道这很简单,就是找不到选择器。
$(document).ready(function() {
$('.edit-btn').click(function() {
$(this).siblings('.edit-box').addClass('open');
});
});
$(document).ready(function() {
$('.edit-btn').click(function() {
// clear all first ( if you want to do )
// $('.edit-box').removeClass('open');
// select in parent of target
$(this).parents('.col:first').find('.edit-box').addClass('open');
// [or] select between siblings of target
// $(this).siblings('.edit-box').addClass('open');
// [or] select next node of target
// $(this).next().addClass('open');
});
});