Fügen Sie eine Klasse für die angeklickte Schaltfläche hinzu und entfernen Sie die Klasse von den Geschwistern

Dec 07 2020

Ich möchte der angeklickten Schaltfläche eine Klasse hinzufügen und diese Klasse von allen Geschwistern entfernen (Schaltfläche). Der folgende Code fügt das CSS für die Schaltflächen hinzu, auf die ich klicke, und kann das CSS für die bereits angewendeten Schaltflächen nicht entfernen.

$("#followingButtonsId").children().addClass('buttonSelected')
            .parent().siblings().find('.buttonSelected').removeClass('buttonSelected');
.buttonSelected { background: #5b2200;}
<div class="row" id="followingButtonsId">
    <button class="buttonSelected">Button1</button>
    <button>Button2</button>
    <button>Button3</button>
</div>

Antworten

3 NicoShultz Dec 07 2020 at 21:34

Beim Klicken entferne ich die Klasse buttonSelectedvon allen Schaltflächen und füge sie dann der angeklickten hinzu

$('button').click(function(e) { $('button').removeClass('buttonSelected');
  $(e.target).addClass('buttonSelected');
});
.buttonSelected {
  background: #5b2200;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row" id="followingButtonsId">
  <button class="buttonSelected">Button1</button>
  <button>Button2</button>
  <button>Button3</button>
</div>

1 Shuvo Dec 07 2020 at 21:36

Das sollte funktionieren:

$("#followingButtonsId button").on("click", function() { $("#followingButtonsId button").removeClass("buttonSelected");
    $(this).addClass("buttonSelected");
});