Question

我正在尝试滑动包含表格的div，使用ajax调用更改表格的行，然后向下滑动包含的表格。我似乎无法让一系列回调有效地发挥作用。

$("div#grid").slideUp('fast', function() {
    //eaery row but the first
    $("#testtable tr")
        .not(":first")
        .filter(":has(input[type='checkbox'][checked])")
        .each(function() {
            //change html using ajax calls
            editrow($(this).attr("id"));
         });

     })
     .slideDown('fast');  // want this to wait until editrow() has been run on each row

editrow（）包含用于编辑给定行的html的ajax调用。问题是 div滑起，然后立即退回。我需要它等到函数在每一行上执行，更改表的html，然后再向下滑动。

Answer 1

我猜第一行是“checkall”类型的东西？也许那是标题？理想情况下，您应该使用checked =“checked”not checked =“true”。你应该简单地在jQuery中使用“checked”属性验证。

以下内容适用于jQuery 1.3+

首先尝试完成一两步。然后尝试转向更复杂的东西。

$("div#grid").slideUp('fast', function() {
   $(this).slideDown('fast');
});

如果有效，那么下一阶段......

$("div#grid").slideUp('fast', function() {
  // For each table row with a checkbox that isn't in the first row
  $("#testtable tr").not(":first").filter(":has(input[type='checkbox'][checked])")
     .each(function(){
          // I substituted your custom function so we can find out if this works first
          alert($(this).attr("id"));
     });
});

如果可行，那就继续......

$("div#grid").slideUp('fast', function() {
  // For each table row with a checkbox that isn't in the first row
  $("#testtable tr").not(":first").filter(":has(input[type='checkbox'][checked])")
     .each(function(){
          // Original function reinserted
          editrow($(this).attr("id"));
     });
     $(this).slideDown('fast');
});

请记住将你的id =“”放在表格行而不是复选框本身。

Answer 2

我认为你应该在ajax调用的成功事件中有$(this).slideDown('fast');。这不适用于您当前的情况（至少，不是我认为您希望它如何工作）因为每个ajax调用都希望触发成功事件。你是否有可能将一个数组传递给你的ajax调用，这样你就可以进行一次调用，而不是一堆不同的调用？没有看到你的确在做什么让它变得困难，但我认为这是你最好的选择。

Answer 3

如果您需要在完成所有ajax调用之后进行下滑动画，那么您可以先计算要编辑的行数，将其保存到变量中，并为每个成功的ajax调用减少该数字。如果成功的ajasx调用将数字减少为0，则执行向下滑动动画。

这样的事情：

$("div#grid").slideUp('fast', function() {
  //every row but the first
  rowsToUpdate = $("#testtable tr")
      .not(":first")
      .filter(":has(input[type='checkbox'][checked])");
  $("#testtable").data('rowsToUpdate', rowsToUpdate.length);
  rowsToUpdate.each(function() {
        //change html using ajax calls
        editrow($(this).attr("id"));
     });

 });

 function editrow(id) {
     $.ajax({
         complete : function () {
             // On complete, not success as we always want to show the table again?
             rowsToUpdate = $("#testtable").data('rowsToUpdate')--;
             $("#testtable").data('rowsToUpdate', rowsToUpdate);
             if (rowsToUpdate == 0) {
                 $("div#grid").slideDown('fast');
             }
         }
 }

警告。完全未经测试的代码。

jQuery - 向上滑动/编辑html /向下滑动

3 个答案: