僅將活動 class 添加到當前元素

Question

我有一些重復的內容部分，其中有一個按鈕。 單擊按鈕后，我希望將活動的 class 添加到“內容”div。 但是，與其將活動的 class 應用於所有實例，我希望它僅針對與已單擊按鈕位於同一行中的內容 div。

<div id="1" class="row">
    <button class="click-me"></button>
    <div class="content">I want the active class applied within this div only.</div>
</div>

<div id="2" class="row">
    <button class="click-me"></button>
    <div class="content">I want the active class applied within this div only.</div>
</div>

<div id="3" class="row">
    <button class="click-me"></button>
    <div class="content">I want the active class applied within this div only.</div>
</div>

我有一些 JS 添加了 class 但不幸的是適用於每個實例。 如何調整它以僅應用於當前行？

我的 JS 目前是：

$(function swatchClass() {
    $('.click-me').click(function() { // when a .myDiv is clicked
        $('.content').not(this).addClass('active');
        $(this).toggleClass('active');
    });
});

Answer 1

你可以這樣做。 如果您還想使用 class content為 div 切換 class active ，只需使用toggleClass()而不是addClass() 。

 $(function swatchClass() { $('.click-me').click(function() { $(this).closest(".row").find(".content").addClass('active'); $(this).toggleClass('active'); }); });

 .active { color:red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="1" class="row"> <button class="click-me">Click</button> <div class="content">I want the active class applied within this div only.</div> </div> <div id="2" class="row"> <button class="click-me">Click</button> <div class="content">I want the active class applied within this div only.</div> </div> <div id="3" class="row"> <button class="click-me">Click</button> <div class="content">I want the active class applied within this div only.</div> </div>