Keith Clark Keith Clark - 2 months ago 8
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:

$('.personstatus')
.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)') {
alert('Down');
$('#status.3140').removeClass('fa-arrow-up');
$('#status.3140').addClass('fa-arrow-down');
$('#status.3140').css('color', '#ff0000');
} else {
alert('Up');
$('#status.' + personId).removeClass('fa-arrow-down');
$('#status.' + personId).addClass('fa-arrow-up');
$('#status.' + personId).css("color", "#00ff00");
}
alert('Finished');
});
});


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

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

$('.showdetails')
.click(function() {
var personId = $(this).attr('id');
document.getElementById('currentid').innerHTML = personId;
$.get('loadperson/basic/' + personId,
function(response) {
document.getElementById('persondetails_table').innerHTML = response;
$('.tab').removeClass('active');
$('#persondetails_basictab').addClass('active');
$('#person_details')
.lightbox_me({
centered: true
});
});
});


What am I missing?

Answer

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".