Set css attribute in onclick event

Question

I have a problem with set fontStyle attribute to single element(by id) in popover. I get onClick event, put style (bold font style) to all class elements and then try to put another style(normal) to one(clicked) element. My code is:

$(document).on('click', '.listElement', function () {
    $('.listElement').css('font-weight', 'bold');
    alert(this.id);
    $(this).css('font-weight', 'normal');
});

There is a demo

Setting bold style for all class elements works and dialog shows correctly id so this is right element(in this) but .css() method doesn't work. I tried to put style by using id like:

$('#A').css('font-weight', 'normal');

and there is no error in console but it doesn't work as well. Is there any other way to set fontStyle to single unique element?

Your code is actually working. But when the popover closes on click on it or outside and opens again the plugin re initialises the font to the initial state. — Dan Philip Bejoy
– Dan Philip Bejoy, Commented Apr 16, 2017 at 18:52
@DanPhilip I'm not sure but probably you are wrong because there is not initial state. In page load is normal font style for all elements and after first click(on any element) there is bold style for all. — barmi
– barmi, Commented Apr 16, 2017 at 18:57
the problem is, you redirect to your page every time you click on a link and the complete code runs from begin. if you want to save the click state you have to store it in sessionStorage and request on script begin. try it without links and you will see the css works. another option is to write a single side application with MVC and listening on hashChange event. (I'm working on a tutorial for that) — TypedSource
– TypedSource, Commented Apr 16, 2017 at 19:02
@TypedSource so why set font style for elements by class works? — barmi
– barmi, Commented Apr 16, 2017 at 19:07

Scott · Accepted Answer · 2017-04-16 19:19:11Z

2

Rather than removing CSS styling why not just never add it to the clicked object??

Get the ID of the clicked object and use that...

$(document).on('click', '.listElement', function () {
var clickEl = this.id; //ID of clicked object
$('.listElement').not('#' + clickEl).css('font-weight', 'bold'); //bolds everything which is NOT the clicked item.
alert(this.id);
});

or

$(document).on('click', '.listElement', function () {
$('.listElement').not('#' + this.id).css('font-weight', 'bold'); //bolds everything which is NOT the clicked item.
alert(this.id);
});

Updated Fiddle

if there is a specific reason you need to remove the styling rather than never applying it...

$(document).on('click', '.listElement', function () {
$('.listElement').css('font-weight', 'bold');
alert(this.id);
$('.listElement#' + this.id).css('font-weight', 'normal');
});

Fiddle for that

edited Apr 16, 2017 at 19:19

answered Apr 16, 2017 at 19:10

Scott

21.9k8 gold badges46 silver badges57 bronze badges

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

Collectives™ on Stack Overflow

Set css attribute in onclick event

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