How do I trigger an onclick CSS on a particular ID

Question

I am trying to trigger a particular CSS on a particular ID, but it is effecting only one of the image of that ID, and not all the images with that ID. Also, how do I roll back the changes if I click again on the same trigger?

This is the HTML I am using.

<div class="row">
    <div class="container">
        <div class="col-sm-3">
            <img src="https://imagesonline.bl.uk/coo/user/gpimages/Images_Online_Cooliris_Logo.jpg" class="img-responsive" id="some" alt="">
        </div>
        <div class="col-sm-3">
            <img src="http://www.niemanlab.org/images/getty-images-logo.png" class="img-responsive" id="some" alt="">
        </div>
        <div class="col-sm-3">
            <img src="http://cdn.eso.org/images/thumb300y/eso1119b.jpg" class="img-responsive" id="some" alt="">
        </div>
        <div class="col-sm-3">
            <img src="http://www.niehs.nih.gov/news/newsroom/releases/2013/august19/tbbpa_image_.jpg" class="img-responsive" id="some" alt="">
        </div>
        <div class="col-sm-3">
            <img src="http://learningdesign.psu.edu/themes/site_themes/agile_records/images/uploads/LDImages/itsupport2.jpg" class="img-responsive" id="some" alt="">
        </div>
        <div class="col-sm-3">
            <img src="http://dummyimage.com/300" class="img-responsive" id="some" alt="">
        </div>
        <div class="col-sm-12 tac">
            <br><br><br><button>test</button>
        </div>
    </div>
</div>

hello world!

And this is the javascript I am using.

<script>
$('#image').click(function() {
    $('#some').css({
        'background-color': 'black',
        'color': 'white',
        'font-size': '44px',
        'opacity': '0.1'
    });
});
</script>

Thanks @Akshay that worked! Can you please tell me how can I roll back the changes to normal if I click the same trigger again? — Kristie Matthew
– Kristie Matthew, Commented May 23, 2015 at 7:15
Hmm, if it's not too much, can you please show me how can I implement it? I am new to JS.. — Kristie Matthew
– Kristie Matthew, Commented May 23, 2015 at 7:21

connexo · Accepted Answer · 2015-05-23 07:51:23Z

2

The problem is you need to use UNIQUE ids. Instead use a class :

$('.img-responsive').css({
    'background-color': 'black',
    'color': 'white',
    'font-size': '44px',
    'opacity': '0.1'
});

Also, never use duplicate ids, IDs are meant to be unique throughout the document.

If you want to rollback the changes use classes instead. There are other approaches, but I feel this one is the best.

CSS:

.class1{
    background-color: black;
    color: white;
    font-size: 44px;
    opacity: 0.1;
  }

Jquery:

$('.img-responsive').toggleClass('class1');

edited May 23, 2015 at 7:51

connexo

57.3k15 gold badges112 silver badges150 bronze badges

answered May 23, 2015 at 7:15

Zee

8,4805 gold badges39 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kristie Matthew Over a year ago

Thanks @zee. Can you please tell me how do I roll back the changes?

Kristie Matthew Over a year ago

Dhaval Bharadva · Accepted Answer · 2015-05-23 07:26:51Z

1

You should use class instead of id for multiple element. for roleback you can use Toggle Class | jQuery UI Try as below:

<style>
    .active{
        background-color: black;
        color: white;
        font-size: 44px;
        opacity: 0.1;
    }
</style>

JS

$('#image').click(function() {
    $('.img-responsive').toggleClass('active');
});

Note: There should not be same id for multiple element in single page otherwise it will always consider first one.

edited May 23, 2015 at 7:26

answered May 23, 2015 at 7:21

Dhaval Bharadva

3,0852 gold badges26 silver badges36 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:05:56Z

0

To rollback to the previous state try using jquery's toggle method

http://api.jquery.com/toggle/

you can pass two functions in the toggle method as parameters and jquery will call each method one at a time.

jQuery click / toggle between two functions

check the link for more help and an example.

edited May 23, 2017 at 12:05

CommunityBot

11 silver badge

answered May 23, 2015 at 7:20

Himanshu Tanwar

9266 silver badges18 bronze badges

Comments

Akash Rajbanshi · Accepted Answer · 2015-05-23 07:21:22Z

0

Try this:

$('#image').click(function() {
   $('.img-responsive').css({
   'background-color': 'black',
   'color': 'white',
   'font-size': '44px',
   'opacity': '0.1'
  });
});

And to rollback just Use this code:

$(".img-responsive").removeAttr("style");

edited May 23, 2015 at 7:21

answered May 23, 2015 at 7:14

Akash Rajbanshi

1,60314 silver badges23 bronze badges

2 Comments

Zee Over a year ago

While this will work, but this will also remove other inline styles if any.

Akash Rajbanshi Over a year ago

Yes...but OP doesnot have any other requirement than this :D

Collectives™ on Stack Overflow

How do I trigger an onclick CSS on a particular ID

4 Answers 4

2 Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related