Keith Clark Keith Clark - 7 months ago 22
CSS Question

.addClass and .removeClass not firing

I have a small page I am testing some jquery out on and one of the elements generated is:

<i class="fa fa-arrow-up personstatus" id="status.3140" style="color: #00ff00;" aria-hidden="true"></i>

I am using jquery to do some modifications:

.click(function() {
var color = $(this).css("color");
var personId = $(this).attr('id').replace('status.', '');
$.get('changestatus/' + personId,
function(response) {
if (color == 'rgb(0, 255, 0)') {
$('#status.3140').css('color', '#ff0000');
} else {
$('#status.' + personId).removeClass('fa-arrow-down');
$('#status.' + personId).addClass('fa-arrow-up');
$('#status.' + personId).css("color", "#00ff00");

It is hitting the alert lines as I would expect, but it is not applying the
or the
at all.

I have another section of jquery code where these work fine:

.click(function() {
var personId = $(this).attr('id');
document.getElementById('currentid').innerHTML = personId;
$.get('loadperson/basic/' + personId,
function(response) {
document.getElementById('persondetails_table').innerHTML = response;
centered: true

What am I missing?


There is an issue with ID. You cannot name it "status.3140". It is explained in more detail here: CSS selector with period in ID

This won't work:

#status.3140 {
  background-color: red;
<div id="status.3140">Lorem ipsum</div>

This will work:

#status\.3140 {
  background-color: red;
<div id="status.3140">Lorem ipsum</div>

However, I highly recommend to avoid periods in IDs. Better change it to id="status-3140".