Jquery change image onclick and add/remove class

Question

everyone,

I found a jquery code that changes the image onclick however, I would like to add/remove the class when it is clicked/active. I couldn't figure it out.

Thanks for helping in advance.

DEMO >

jQuery(document).ready(function ($) {
         $('.black-button').on({
                    'click': function () {
                        $('#change-image').attr('src', 'https://images.unsplash.com/photo-1607180234730-7a5c833e6a8a?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8NXx8fGVufDB8fHw%3D&auto=format&fit=crop&w=500&q=60');
                    }

                });
                $('.red-button').on({
                    'click': function () {
                        $('#change-image').attr('src', 'https://images.unsplash.com/photo-1607348907250-691de1d47163?ixid=MXwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8NHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60');
                    }
                });

                $('.blue-button').on({
                    'click': function () {
                        $('#change-image').attr('src', 'https://images.unsplash.com/photo-1607349153323-3290ed68d04d?ixid=MXwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8Mnx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60');
                    }
                });
            });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button-container">
                            <button class="black-button">Berlin</button>
                            <button class="red-button">İstanbul</button>
                            <button class="blue-button">Sweden</button>
            
                        </div>
<img id="change-image" src="https://images.unsplash.com/photo-1607180234730-7a5c833e6a8a?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8NXx8fGVufDB8fHw%3D&auto=format&fit=crop&w=500&q=60" alt="">

There is a manual of JQUERY with a lot of information about every method: api.jquery.com/addclass — Alexander Dobernig
– Alexander Dobernig, Commented Jan 31, 2021 at 12:41

Swati · Accepted Answer · 2021-01-31 12:29:00Z

You can use addClass() to add some class to your button and use not(this).removeClass("active") to remove class from other buttons.

Demo Code :

$('button').on('click', function() {
  if ($(this).attr("class") == "black-button") {
    $('#change-image').attr('src', 'https://images.unsplash.com/photo-1607180234730-7a5c833e6a8a?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8NXx8fGVufDB8fHw%3D&auto=format&fit=crop&w=500&q=60');
  } else if ($(this).attr("class") == "red-button") {
    $('#change-image').attr('src', 'https://images.unsplash.com/photo-1607348907250-691de1d47163?ixid=MXwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8NHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60');
  } else {
    $('#change-image').attr('src', 'https://images.unsplash.com/photo-1607349153323-3290ed68d04d?ixid=MXwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8Mnx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60');
  }
  $(this).addClass("active");
  $("button").not(this).removeClass("active")

});

.active {
  background: red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button-container">
  <button class="black-button">Berlin</button>
  <button class="red-button">İstanbul</button>
  <button class="blue-button">Sweden</button>

</div>
<img id="change-image" src="https://images.unsplash.com/photo-1607180234730-7a5c833e6a8a?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8NXx8fGVufDB8fHw%3D&auto=format&fit=crop&w=500&q=60" alt="">

Collectives™ on Stack Overflow

Jquery change image onclick and add/remove class

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related