jQuery 在进行 ajax 调用时切换等待图像

Question

我正在学习如何遍历 DOM，所以这个问题与此相关。

我正在使用 Coldfusion 输出一些数据库结果。循环是循环表数据，而不是循环表行。在每个表中，我都有按钮来执行各种 ajax 调用（我已经可以使用此功能）。单击按钮时，我想显示或切换动画微调器，以便用户知道正在发生某些事情，然后在 ajax 调用完成时隐藏或切换。基本上我只需要帮助识别微调器即可切换它。 ID 不是唯一的

我的第一次尝试是将衣柜跨度标签定位到单击的按钮。我无法让它发挥作用。我的第二次尝试是使用 .parent() 获取 TD，然后从那里使用 .next() 定位 span 标签，这将允许我切换它。我也无法让它发挥作用。在这里写完之后， next() 可能不是正确的选择，但我仍然在学习如何遍历 DOM。 :)

注意：下面的代码默认显示微调器，但我有一个此处未显示的函数，它将通过 jQuery 的切换函数隐藏它。

<table cellpadding="3" class="tablesorter" id="table_id">
<tr>
    <th class="form"><label>System Name</label></th>
    <td>
        <button type="button" id="removeButton" class="fg-button ui-state-default ui-corner-all remove_SystemName" >Remove</button>
        <button type="button" id="checkButton" class="fg-button ui-state-default ui-corner-all check_SystemName" >Check</button>
        <span id="statusInfoDiv" class="statusInfoDiv"><img src="/assets/images/working.gif"> Working...</span></td>
</tr>

我尝试过的 jQuery 选项 1

$(".check_SystemName").live("click", function(){
var spinner = $(this).closest('span').find("statusInfoDiv");
spinner.toggle();
});

我尝试过的 jQuery 选项 2

$(".check_SystemName").live("click", function(){
var spinner = $("this").parent().next(".statusInfoDiv");
spinner.toggle();
});

Answer 1

您需要使用父级“向上”遍历 DOM，然后可以使用子级或兄弟级“向下”遍历 DOM。

所以你可以这样做：

$(this).parent().children('.statusInfoDiv').toggle();