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存在问题。你无法命名它#34; status.3140＆＃34;。这里有更详细的解释：CSS selector with period in ID

这不会起作用：

＆＃13;

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

＆＃13;

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

＆＃13;

这将有效：

＆＃13;

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

＆＃13;

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

＆＃13;

但是，我强烈建议避免使用ID。最好将其更改为id="status-3140"。

Answer 2

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

感谢您指出我正确的方向

.addClass和.removeClass没有触发

2 个答案: