Tips for updating the class of a button upon clicking it

Question

Tips for updating the class of a button upon clicking it

I have a dilemma with my two buttons - one is green and the other has no background. I want them to change appearance when clicked, from green to one with a dashed border-bottom style.

Below is the HTML code for these buttons:

 <div class="btns">
                <button type="button" class="btn btn-success">Male</button>
                <button type="button" class="btn btn-link btn-simple">Female</button>
           </div>

I attempted to write a script to achieve this functionality:

$('.btn').click(function() {
    var $this = $(this);
    if ($this.hasClass('btn-success')) {
        $this.removeClass().addClass('btn-simple');
    } else if ($this.hasClass('btn-simple')) {
        $this.removeClass('btn-simple').addClass('btn-success');
       }
});

Unfortunately, it seems that the script is not working as expected.

In addition, here is the CSS styling added for the button with the dashed border effect:

.btn-simple {
    border-bottom: 1px dashed #000;
    color: #000;
}

No other additional styles were applied since these buttons are utilizing Bootstrap styling.

javascript jquery css button

Answer 1

Answer №1

It is recommended to include your code inside the document.ready method for proper execution.

$(document).ready(function () {
        $('.button').click(function () {
            var $this = $(this);
            if ($this.hasClass('btn-primary')) {
                $this.removeClass().addClass('btn-secondary');
            } else if ($this.hasClass('btn-secondary')) {
                $this.removeClass('btn-secondary').addClass('btn-primary');
            }
        });
    });

Answer 2

It is recommended to include your code inside the document.ready method for proper execution.

$(document).ready(function () {
        $('.button').click(function () {
            var $this = $(this);
            if ($this.hasClass('btn-primary')) {
                $this.removeClass().addClass('btn-secondary');
            } else if ($this.hasClass('btn-secondary')) {
                $this.removeClass('btn-secondary').addClass('btn-primary');
            }
        });
    });

Answer 3

Answer №2

To remove a specific class, you should use the following syntax: $this.removeClass('btn-success'). See the example provided in the link below for more clarity.

   $('.btn').click(function(){
       var $this = $(this);
       if (!$this.hasClass('btn-success')) {
        $('.btn').removeClass('btn-success')
        $this.addClass('btn-success');

       }
    })

https://codepen.io/jmejia1221/pen/qMwLQP

Answer 4

To remove a specific class, you should use the following syntax: $this.removeClass('btn-success'). See the example provided in the link below for more clarity.

   $('.btn').click(function(){
       var $this = $(this);
       if (!$this.hasClass('btn-success')) {
        $('.btn').removeClass('btn-success')
        $this.addClass('btn-success');

       }
    })

https://codepen.io/jmejia1221/pen/qMwLQP

Answer 5

Answer №3

You forgot to remove the btn-success class and add the btn-link class. Make sure to wrap this code inside document.ready for it to work properly.

$(document).ready(function () {
    $('.btn').click(function() {
        var $this = $(this);
        if ($this.hasClass('btn-success')) {
            $this.removeClass('btn-success').addClass('btn-simple');
        } else if ($this.hasClass('btn-simple')) {
            $this.removeClass('btn-simple').addClass('btn-link').addClass('btn-success');
           }
    });
});

Answer 6

You forgot to remove the btn-success class and add the btn-link class. Make sure to wrap this code inside document.ready for it to work properly.

$(document).ready(function () {
    $('.btn').click(function() {
        var $this = $(this);
        if ($this.hasClass('btn-success')) {
            $this.removeClass('btn-success').addClass('btn-simple');
        } else if ($this.hasClass('btn-simple')) {
            $this.removeClass('btn-simple').addClass('btn-link').addClass('btn-success');
           }
    });
});

Answer 7

Answer №4

If you're looking to switch between buttons in a common container, you can use the following jQuery code:

/* A demonstration of toggling between buttons */
$('.btn').click(function() {
  var thisParent = $(this).closest('.btns');
  $(thisParent).find('.btn-success').addClass('btn-simple')
  $(thisParent).find('.btn-success').removeClass('btn-success');
  $(this).removeClass('btn-simple');
  $(this).addClass('btn-success');
})

/* Simplified version
$('.btn').click(function() {
  $(this).closest('.btns').find('.btn-success').addClass('btn-simple').removeClass('btn-success');
  $(this).removeClass('btn-simple').addClass('btn-success');
})
*/

* { outline: 0; } button { border-style: none; cursor: pointer; padding: 5px; } button::-moz-focus-inner { border: 0; }
/* Styles for buttons */

.btn-simple {
  border-bottom: 1px dashed #000;
  color: #000;
}
.btn-success {
  background-color: hsla(96, 92%, 37%, 1);
  border-radius: 2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btns">
  <button type="button" class="btn btn-success">Male</button>
  <button type="button" class="btn btn-link btn-simple">Female</button>
</div>
<div class="btns">
  <button type="button" class="btn btn-success">Male</button>
  <button type="button" class="btn btn-link btn-simple">Female</button>
   <button type="button" class="btn btn-link btn-simple">Third</button>
</div>

Check out the fiddle here.

Answer 8

If you're looking to switch between buttons in a common container, you can use the following jQuery code:

/* A demonstration of toggling between buttons */
$('.btn').click(function() {
  var thisParent = $(this).closest('.btns');
  $(thisParent).find('.btn-success').addClass('btn-simple')
  $(thisParent).find('.btn-success').removeClass('btn-success');
  $(this).removeClass('btn-simple');
  $(this).addClass('btn-success');
})

/* Simplified version
$('.btn').click(function() {
  $(this).closest('.btns').find('.btn-success').addClass('btn-simple').removeClass('btn-success');
  $(this).removeClass('btn-simple').addClass('btn-success');
})
*/

* { outline: 0; } button { border-style: none; cursor: pointer; padding: 5px; } button::-moz-focus-inner { border: 0; }
/* Styles for buttons */

.btn-simple {
  border-bottom: 1px dashed #000;
  color: #000;
}
.btn-success {
  background-color: hsla(96, 92%, 37%, 1);
  border-radius: 2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btns">
  <button type="button" class="btn btn-success">Male</button>
  <button type="button" class="btn btn-link btn-simple">Female</button>
</div>
<div class="btns">
  <button type="button" class="btn btn-success">Male</button>
  <button type="button" class="btn btn-link btn-simple">Female</button>
   <button type="button" class="btn btn-link btn-simple">Third</button>
</div>

Check out the fiddle here.

Tips for updating the class of a button upon clicking it

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Implementing the ability to add and remove classes in JavaScript

The error message "firebase.initializeApp is not defined" indicates that the object is not properly initialized

Trigger the click() event in jQuery before the blur() event

using a dynamic v-model as an argument in a function call

Looking for a way to store data in local storage so it remains even after the page is reloaded? I tried adding a local storage function, but it doesn't appear to be

Transforming Several Dropdowns using jQuery, JSON, and PHP

How can you achieve three layers of nested quotes in Dynamic HTML?

Is there a permanent solution to fixing the error code -4094 that is repeatedly occurring during React Native startup?

Managing numerous ajax forms within a single page

Interactive horizontal slideshow for hyperlinks - bootstrap framework and model-view-controller architecture

Jade: Incorporating a JavaScript file at a specific location

Apologies, but it seems there was an issue reading the "checked" property as it is null

What exactly is the purpose of the colon in JavaScript's import statement?

Utilizing divisions for specifying CSS attributes

Utilizing LessCss for color transparency and variable declarations with @vars

Launch target _blank within a modal instead of a new tab

Customizing the style of an element in Vue depending on the size of the window

Navigate back to the previous page following the completion of an AJAX data submission

"Organizing a menu in JSON format based on alphabetical

Is there a way to capture the stdout and stderr output from a WebAssembly module that has been generated using Emscripten in JavaScript?