如何在單擊按鈕時將 class 添加到具有相同名稱的 div

Question

我想在單擊按鈕時將 class 添加到 div，我有以下代碼，但我無法讓 jquery 正常工作：

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

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col account"> <strong>Account Settings</strong> <div class="col"> <span>Profile Status</span> <p>status</p> <div class="flex-btn front-btn"> <button class="edit-btn">edit</button> </div> <div class="edit-box"> edit 1 </div> </div> <div class="col"> <span>Name</span> <p> name</p> <div class="flex-btn front-btn"> <button class="edit-btn">edit</button> </div> <div class="edit-box"> edit 2 </div> </div> <div class="col"> <span>Username</span> <p>username</p> <div class="flex-btn front-btn"> <button class="edit-btn">edit</button> </div> <div class="edit-box"> edit 3 </div> </div> <div class="col"> <span>Bio</span> <p>bio</p> <div class="flex-btn front-btn"> <button class="edit-btn">edit</button> </div> <div class="edit-box"> edit 4 </div> </div> </div>

單擊該按鈕會將 class 添加到 div 即.edit-box 。 所以只有在點擊的按鈕上才會將 class 添加到相關的 div 中。

Answer 1

我對你的理解正確嗎？

 $(document).ready(function() { $('.edit-btn').click(function() { //$('.edit-box').removeClass('open'); $(this).closest('.col').find('.edit-box').addClass('open'); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col account"> <strong>Account Settings</strong> <div class="col"> <span>Profile Status</span> <p>status</p> <div class="flex-btn front-btn"> <button class="edit-btn">edit</button> </div> <div class="edit-box"> edit 1 </div> </div> <div class="col"> <span>Name</span> <p> name</p> <div class="flex-btn front-btn"> <button class="edit-btn">edit</button> </div> <div class="edit-box"> edit 2 </div> </div> <div class="col"> <span>Username</span> <p>username</p> <div class="flex-btn front-btn"> <button class="edit-btn">edit</button> </div> <div class="edit-box"> edit 3 </div> </div> <div class="col"> <span>Bio</span> <p>bio</p> <div class="flex-btn front-btn"> <button class="edit-btn">edit</button> </div> <div class="edit-box"> edit 4 </div> </div> </div>

Answer 2

此代碼將open的 class 添加到單擊按鈕之后的edit-box div 中。

它的工作原理是找到按鈕的父級（即flex-btn容器 div），然后獲取具有 class edit-box的下一個元素。

為了在下面看到它的工作，我在.edit-box和.edit-box.open div 中添加了背景顏色，這樣您可以在單擊按鈕時看到它的變化：

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

 .edit-box { background: #ccffff; }.edit-box.open { background: #ccccff; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col account"> <strong>Account Settings</strong> <div class="col"> <span>Profile Status</span> <p>status</p> <div class="flex-btn front-btn"> <button class="edit-btn">edit</button> </div> <div class="edit-box"> edit 1 </div> </div> <div class="col"> <span>Name</span> <p> name</p> <div class="flex-btn front-btn"> <button class="edit-btn">edit</button> </div> <div class="edit-box"> edit 2 </div> </div> <div class="col"> <span>Username</span> <p>username</p> <div class="flex-btn front-btn"> <button class="edit-btn">edit</button> </div> <div class="edit-box"> edit 3 </div> </div> <div class="col"> <span>Bio</span> <p>bio</p> <div class="flex-btn front-btn"> <button class="edit-btn">edit</button> </div> <div class="edit-box"> edit 4 </div> </div> </div>

Answer 3

就個人而言，我會將其添加到環繞按鈕的所有 div 中：

onclick="this.nextElementSibling.classList.add('open');"

這不是你問的，所以這里是如何讓你的東西工作（使用 vanilla javascript）：

document.querySelectorAll('.edit-btn').forEach(button => {
            button.addEventListener("mouseup", () => {
                button.parentElement.nextElementSibling.classList.add("open")
            })
        })