.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

ID 有问题。您不能将其命名为 "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 中使用句点。最好改成id="status-3140".

Answer 2

感谢@Swordfish0321，并确认@Daren Delima 和@Barmar，'.'是我的问题。当我逐步调试调试器时，它正在使用“.”解析字符串。作为字符串拆分器。我能够逃脱“。”和所有作品。

感谢您为我指明正确的方向

.addClass 和 .removeClass 不触发

.addClass and .removeClass not firing

css

jquery

addclass

removeclass