一次只影响一个元素的切换类

Question

我有两个并排的相同元素的例子。我需要一次只能切换一个类。使用我当前的 Javascript，它们同时被切换。

这是后端开发人员用来构建前端的样式指南的一部分，因此我不能拥有仅用于 javascript 的无关类。此示例仅适用于使用 groovy/grails 在实际应用程序中工作的样式指南。

非常感谢任何提示！

    $('.toggle-button-wrapper').on('click', function(e) {

      $('.toggle-button').toggleClass("toggle-button-selected");

    e.preventDefault();

    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h4 style="margin-bottom: 10px;">Dark toggle</h4>

<div class="toggle-btn-dark">

    <div class="toggle-button-wrapper">

        <button class="toggle-button btn-card-mini first toggle-button-selected">

            -

        </button>

        <button class="btn-card-big toggle-button last">

            +

        </button>

    </div>

</div>

<br>

<h4 style="margin-bottom: 10px;">Light toggle</h4>

<div class="toggle-btn-light">

    <div class="toggle-button-wrapper">

        <button class="toggle-button btn-card-mini toggle-button-selected first" >

            -

        </button>

        <button class="btn-card-big toggle-button last">

            +

        </button>

    </div>

</div>

Answer 1

您可以将选择器更改为&nbsp; &nbsp; $('.toggle-button-wrapper').on('click', function(e) {&nbsp; &nbsp; &nbsp; $(this).find('.toggle-button').toggleClass("toggle-button-selected");&nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; });这基本上可以防止选择所有切换按钮并限制单击包装器的子项