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

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

您可以将选择器更改为

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

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

    e.preventDefault();

    });

这基本上可以防止选择所有切换按钮并限制单击包装器的子项