JQuery 切换 Class 每次点击 1 个切换

Question

I have this great reference here . I'm trying to toggle a class and will affect 1 at a time. But it seems to be not working without using a parent element to click just like in the reference. I want to use only 1 class with a click function and will toggle effect one at a time. Would be this possible?

 $(document).ready(function() { getQuoteButtton(); }); function getQuoteButtton() { // button quote $("body").on("click", ".btn-quote", function(e) { var $this = $(this); $this.toggleClass('quote-selected'); if ($this.hasClass('quote-selected')) { $this.text('Selected'); } else { $this.text('Select This Quote'); } }); }

 .section-block-table { width: 100%; margin: 0 auto; position: relative; border-collapse: separate; color: #2E384D; border-spacing: 0; }.btn-quote { background: #fff; position: relative; text-align: center; color: #49CD96; font-size: 14px; font-weight: 600; line-height: 20px; padding: 8px 9px; border-radius: 6px; border: 1px solid #49CD96; min-width: 166px; }.btn-quote:hover { background: #49CD96; color: #fff; }.btn-quote.quote-selected { background: #49CD96; color: #fff; }.btn-quote.quote-selected:before { content: "\f00c"; font-family: 'Font Awesome 5 Free'; color: #fff; margin-right: 7px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <table class="section-block-table"> <tr> <td><button class="btn-quote m-auto">Select This Quote</button></td> <td><button class="btn-quote m-auto">Select This Quote</button></td> <td><button class="btn-quote m-auto">Select This Quote</button></td> </tr> </table>

Answer 1

It is recommended to delegate. Why do you not want to use the parent element?

Note I added a recommended tbody and gave it an ID

 $(function() { getQuoteButtton() }) function getQuoteButtton() { const $tb = $('#tb'); $tb.on('click', '.btn-quote', function(e) { $this = $(this); $this.toggleClass('quote-selected').text($this.hasClass('quote-selected')? 'Selected': 'Select This Quote'); $('.btn-quote', $tb).not(this).removeClass('quote-selected').text('Select This Quote'); }); }

 .section-block-table { width: 100%; margin: 0 auto; position: relative; border-collapse: separate; color: #2E384D; border-spacing: 0; }.btn-quote { background: #fff; position: relative; text-align: center; color: #49CD96; font-size: 14px; font-weight: 600; line-height: 20px; padding: 8px 9px; border-radius: 6px; border: 1px solid #49CD96; min-width: 166px; }.btn-quote:hover { background: #49CD96; color: #fff; }.btn-quote.quote-selected { background: #49CD96; color: #fff; }.btn-quote.quote-selected:before { content: "\f00c"; font-family: 'Font Awesome 5 Free'; color: #fff; margin-right: 7px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <table class="section-block-table"> <tbody id="tb"> <tr> <td><button class="btn-quote m-auto">Select This Quote</button></td> <td><button class="btn-quote m-auto">Select This Quote</button></td> <td><button class="btn-quote m-auto">Select This Quote</button></td> </tr> </tbody> </table>

Answer 2

To answer to your question, "it seems to be not working without using a parent element to click just like in the reference", it can be done, like below.

The strength of event delegation comes from the fact that it allows to listen to an event on elements created at runtime, as the event will bubble up to the element the listener is attached to. In other words, attaching the listeners directly to the button will work if and only if all the buttons needed during the app lifetime are already present in the dom when the listener is declared.

If that is not the case, and a button is created by javascript after dom content is loaded, delegating to an ancestor element is the solution.

mplungjan's answer is more robust, as a general solution, there are definitely cases for both imho

 $(document).ready(function() { $('.btn-quote').click(toggleSelected) }) function toggleSelected(event) { // as we are listening to an event // event.target is the element that // was clicked by the user $clickedButton = $(event.target) $otherButtons = $(".btn-quote").not(event.target) $otherButtons.removeClass('quote-selected').text('Select This Quote') $clickedButton.toggleClass('quote-selected').text( $clickedButton.hasClass('quote-selected')? 'Selected': 'Select This Quote' ) }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <table class="section-block-table"> <tbody> <tr> <td><button class="btn-quote m-auto">Select This Quote</button></td> <td><button class="btn-quote m-auto">Select This Quote</button></td> <td><button class="btn-quote m-auto">Select This Quote</button></td> </tr> </tbody> </table>