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();