.addClass и .removeClass не стреляя

Question

У меня есть небольшая страница Я тестирую некоторые JQuery на и один из элементов генерируемых:

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

Я использую JQuery, чтобы сделать некоторые изменения:

$('.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'); 
       }); 
     }); 

он бьет линии Уведомления, как я бы ожидать, но не применяя .removeClass.addClass или .css вообще.

У меня есть еще один раздел JQuery кода, где они работают отлично:

$('.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 
         }); 
       }); 
     }); 

Что мне не хватает?

Answer 1

Существует проблема с идентификатором. Вы не можете назвать его «status.3140». Это объясняется более подробно здесь: CSS selector with period in ID

Это не будет работать:

#status.3140 { 
 
    background-color: red; 
 
}

<div id="status.3140">Lorem ipsum</div>

Это будет работать:

#status\.3140 { 
 
    background-color: red; 
 
}

<div id="status.3140">Lorem ipsum</div>

Однако я настоятельно рекомендую избегать периодов в идентификаторах. Лучше измените его на id="status-3140".

Answer 2

Благодаря @ Swordfish0321 и подтверждая @ Daren Delima и @Barmar, '.' была моя проблема. Когда я прошел через отладчик, он разбирал строку, используя '.' как разделитель строк. Я смог сбежать. и все работает.

Спасибо, что указал мне в нужном направлении