jQuery - 向上滑動/編輯html /向下滑動

我試圖滑動包含表格的div，用ajax調用更改表格的行，然後將包含的表格向下滑動。我似乎無法讓這一系列回調有效地發揮作用。jQuery - 向上滑動/編輯html /向下滑動

$("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（）包含ajax調用來編輯給定行的html。問題是 div滑落，然後立即退縮。我需要它等到函數在每一行上執行，改變表格的html，然後再將其滑下。

來源

2009-08-19 Kyle

「回調有效地工作」是什麼意思？它是否滑開，然後立即關閉？ – theIV 2009-08-19 19:29:23

我編輯了條目以更具描述性。 – Kyle 2009-08-19 20:00:04

如果您需要在完成所有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'); 
      } 
     } 
}

警告。完全未經測試的代碼。

來源

2009-10-28 13:22:53

我猜第一行是一個「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 = 「」在表格行中不是複選框本身。

來源

2009-08-19 19:57:20 eksith

感謝您的回覆和指點。我編輯了這篇文章，以便更詳細地描述我的問題。問題在於效果的時間，真的。 – Kyle 2009-08-19 20:08:27

你能舉一個你試圖操作的HTML的小樣本嗎？這將有助於瞭解表格的外觀。 – eksith 2009-08-20 16:27:34

我想你應該有一個成功的事件從你的ajax調用$(this).slideDown('fast');。這不適用於你目前的情況（至少不是我認爲你會喜歡它的工作方式），因爲每個ajax調用都希望觸發成功事件。你有可能將數組傳遞給你的ajax調用，這樣你可以做一個調用，而不是一堆不同的調用？沒有確切地看到你在做什麼會造成困難，但我認爲這是你最好的選擇。

來源

2009-08-19 20:21:33 theIV

這就是我正在意識到的。不知道我可以用數組來做我的ajax。我瘋狂地搜查一個變量，但我不喜歡這個選項。感謝您的回覆。 – Kyle 2009-08-19 20:50:08

jQuery - 向上滑動/編輯html /向下滑動

回答

相關問題