切換 class 一次只會影響一個元素

Question

我並排有兩個相同元素的示例。 我需要一次只能切換一個 class。 在我目前的 Javascript 中，它們都同時被切換。

這是后端開發人員用來構建前端的樣式指南的一部分，因此我不能有僅適用於 javascript 的無關類。 此示例僅適用於它在使用 groovy/grails 的實際應用程序中工作的樣式指南。

非常感謝任何提示！

 $('.toggle-button-wrapper').on('click', function(e) { $('.toggle-button').toggleClass("toggle-button-selected"); e.preventDefault(); });

 .toggle-button-wrapper { display: flex; }.toggle-btn-dark.toggle-button-wrapper { margin-bottom: 0; margin-right: 1rem; }.toggle-btn-dark.toggle-button { display: inline-block; text-decoration: none; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 3.6rem; height: 2.4rem; background-color: #ccc; color: black; &:hover { background-color: darken(#ccc, 5%); } }.toggle-btn-dark.toggle-button.icon { fill: black; margin: auto; }.toggle-btn-dark.toggle-button-selected { background: purple; fill: white; color: white; &:hover, &:active { cursor: default; background-color: lighten(purple, 5%); } }.toggle-btn-dark.toggle-button-selected.icon { fill: white; }.toggle-btn-light.toggle-button-wrapper { margin-bottom: 0; margin-right: 1rem; }.toggle-btn-light.toggle-button { border: 1px solid #ccc; display: inline-block; text-decoration: none; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 3.6rem; height: 2.4rem; background-color: pink; color: black; &:hover { background-color: darken(pink, 5%); } }.toggle-btn-light.toggle-button.icon { fill: black; margin: auto; }.toggle-btn-light.toggle-button-selected { background-color: hotpink; color: white; &:hover, &:active { cursor: default; background-color: darken(hotpink, 5%); } }.toggle-btn-light.toggle-button-selected.icon { fill: white; }.toggle-button.first{ border-left-style: none; border-top-left-radius: 1.4rem; border-bottom-left-radius: 1.4rem; border-top-right-radius: 0; border-bottom-right-radius: 0; }.toggle-button.last { border-top-right-radius: 1.4rem; border-bottom-right-radius: 1.4rem; border-top-left-radius: 0; border-bottom-left-radius: 0; }

 <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();
    });

這基本上可以防止選擇所有切換按鈕並限制單擊包裝器的子級