javascript - 如何在 .ajax 调用后更改 UI 元素上的 CSS

Question

我有一个 Symfony 应用程序，我正在为其开发一个 Bootstrap 前端。

我正在尝试使用 ajax 来切换数据库中元素的状态。每当单击 a.isActive 时，我的 /admin/toggleProgramActive 路由都应该被调用。该路由包含适当更新数据库的代码。成功时，应该调用 .done，并运行其中的 jQuery(更改某些元素的样式)。

但是，实际情况是这样的:正在调用我的 Symfony 路由，并且正在更新数据库。但是...jQuery 永远不会触发 UI 更改。

相关代码如下:

HTML:

...
<tbody>
    <tr class="bg-primary no-hover">
        <th ...>
            <div>
                <a href="#" 
                   class="isActive" 
                   data-program-id="{{ program.programId }}">
                    <span class="fa fa-power-off {{ active  ?  'active'  :  'non-active' }}" > </span>
                </a>
            </div>
        </th>
    </tr>
</tbody>
...

JavaScript:

$(document).ready(function ()  {
    $(".isActive").on('click', function()  {
        var element = $(this);
        $.ajax({
            type: "post",
            url:  "/admin/toggleProgramActive",
            data: {"id": $(this).data('program-id')}
        })
            .done(function() {
                element.closest("tr").css('background-color', '#FF6600');
                element.closest("tbody").effect("highlight", {}, 600, function()  {
                    $(this).find("tr.bg-primary").css('background-color', "#337AB7")
                });
            })
    });
});

我知道正在调用 .done。如果我在 .done(function() { 之后放置一个 console.log(element) 我可以看到它返回 [a.isactive] Chrome 控制台。

知道我做错了什么吗？我应该如何在 ajax 调用后更改 CSS？

Answer 1

正确的做法如下:

在服务器端，路由/admin/toggleProgramActiv应该返回 programId作为回应。例如，它应该发送如下 JSON 响应:

{
  programId: '215546'
}

然后在你的js代码中做如下操作:

$(document).ready(function ()  {
    $(".isActive").on('click', function()  {
        $.ajax({
            type: "post",
            url:  "/admin/toggleProgramActive",
            data: {"id": $(this).data('program-id')}
        })
            .done(function(response) {
                var pid = response.programId;
                var element = $('a[data-program-id=' + pid + ']');

                element.removeClass('isActive');
                element.closest("tr").css('background-color', '#FF6600');
                element.closest("tbody").effect("highlight", {}, 600, function()  {
                    $(this).find("tr.bg-primary").css('background-color', "#337AB7")
                });
            })
    });
});

此外，请确保您有 <tr>在您的 html 中添加标签，其中包括 <a> ，因为我没有看到任何 <tr>在你的问题中。