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>在你的问题中。