javascript - jquery 仅向该元素内的元素添加类

Question

这是针对用户帐户的。当用户点击编辑按钮时，我希望在按钮所在的元素内显示一个编辑框。

所以我有这个标记

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

然后我有jquery

$(document).ready(function()
{
    $('.edit-btn').click(function()
    {
        $('.edit-box').addClass('open');
    });
});

有没有办法只将类添加到与 .edit-btn 位于同一 .col 中的 .edit-box 中？

这是一个js fiddle https://jsfiddle.net/y6ukq3th/

Answer 1

是的，您可以使用 .siblings('.edit-box') 将类添加到具有该类作为单击按钮的同级类的类中:

$(document).ready(function() {
     $('.edit-btn').click(function() {
         $(this).siblings('.edit-box').addClass('open');
     });
 });

Demo