2017-01-05 8 views
-1

私の問題はSafariブラウザにのみ関連しています。jQuery各ループがサファリでインクリメントしない

私は28列のグリッドを持っています。最初の列には名前が含まれ、残りの27個は1年の最初の6か月の週を表し、7つの小さな列がそれぞれ曜日を表します。 各行は人物を表し、グリッドは人が何日働いているか休暇中であるかを強調表示します(バケーションカレンダー)。

jQueryを使用してグリッドをループし、休暇中の人物を識別する特定のクラス名を含む小さな列(つまり曜日)の数を計算します。グリッドの下部には、毎日の合計を追加して、その特定の日に何人の人が働いているかを示します。各ループは、すべての人の最初の日の列を垂直方向にループし、それを配列(すなわち[5,0,0,0,0])に追加し、平日の他の4日間(すなわち[5、私は週末を計算しないので、5の配列です。私は27の配列で終わります。そして、私は別のループに入ります。そして、次の週の列に移動し、プロセスを繰り返します。合計されている毎日のために、配列の値を追加。

function CalculateTotalWorkersPerDay_Name() { 
//Count number of month columns which contains the weeks 
var tdCount = $(".halfYear .outertr:nth-child(2) td.outer").length; 
var sum = 0; 
var count; 
var toolTipContent; 

//iterate based on the amount of date columns 
for (count = 0; count < tdCount; count++) { 
    var totals = [0, 0, 0, 0, 0]; 

    function getTotals() { 
     var tdNum = count + 2; //represents 2nd child as the first is the name fíeld 
     //iterate over every direct tr 
     $(".halfYear tr.outertr").each(function() { 
      $(this).find(".outer:nth-child(" + tdNum + ") .inner tr td").each(function (j) { 
       if ($(this).hasClass("std") || $(this).hasClass("other")) { 
        sum += 1; 
        totals[j] += 1; 
       } 
      }); 
     }); 
     //Insert total values into html 
     $(".totalRow td.outer:nth-child(" + tdNum + ") td.totalSum").each(function (k) { 

      toolTipContent = util.tr("Mon: " + totals[0] + "</br>Tues: " + totals[1] + "</br>Wed: " + totals[2] + "</br>Thurs: " + totals[3] + "</br>Fri: " + totals[4], 
       "Mo: " + totals[0] + "</br>Di: " + totals[1] + "</br>Mi: " + totals[2] + "</br>Do: " + totals[3] + "</br>Fr: " + totals[4], ""); 

      var splitNum = ("" + totals[k]).split(""); 
      if (totals[k] != null) { 
       if (totals[k].toString().length == 2) { 
        $(this).append("<span style='display:block;'>" + splitNum[0] + "</span><span>" + splitNum[1] + "</span>"); 
       } 
       else if (totals[k].toString().length == 3) { 
        $(this).append("<span style='display:block;'>" + splitNum[0] + "</span><span style='display:block;'>" + splitNum[1] + "</span><span>" + splitNum[2] + "</span>"); 
       } 
       else { 
        $(this).append("<span style='display:block;'>" + totals[k] + "</span>"); 
       } 
      } 
      $(".totalSumTable" + count + " ").attr("onmouseover", "Tip('" + toolTipContent + "', OFFSETY, 20)"); 
      $(".totalSumTable" + count + " ").attr("onmouseout", "UnTip()"); 
     }); 
     console.log(totals); 
    } 
    getTotals(count); 
}; 

}

の方法は、Safariブラウザを除いて動作し、私はD'on't理由。サファリでは、私はまだ27を取得する知っています最初の配列([0,8,8,8,7])のみが正しく表示されます。 Safariで問題が発生した場合は、もちろん、必要な場合にはより多くの情報を提供することができます。私は、私のコードと問題がこの時点で十分にはっきりしていることを願っています。実際には、それぞれのループとは別に問題がないわけではありません。

画像の数字は、スペースの制限(11は1未満1)で縦に表示されます。

Chrome: working

Safari: not working

アップデート:私は、コンソールに機能をもう一度実行する場合は、それが正しいデータを示しています。コードをデバッグすると、正しいデータも得られます。多分、関数が呼ばれたときと関係があります。

更新2:コメントの下の各ループで、「合計値をhtmlに挿入する」では、k変数が増分されていないため、総計配列の最初のインデックス値のみが各合計に追加されます。

+0

がわかりました更新しました。だからあなたは何のデバッグをしましたか? Safariには、コードをステップ実行し、変数の値をチェックし、ロジックに従うために使用できるビルトインデバッガがあります。 –

+0

現在デバッグ中ですが、わかりやすい理由はありますか?私が気づいていないSafariで動作します。 –

答えて

0

問題は、どのように各機能の要素を選択していたかです。私はそれを壊し、それは各ループの反復を修正しました。これはすべてのブラウザで動作するようになりました。この問題の難しさは、ブラウザでコードをデバッグしたときにうまくいきました。

OLD

$(".halfYear tr.outertr").each(function() { 
      $(this).find(".outer:nth-child(" + tdNum + ") .inner tr td").each(function (j) { 
      $(this).find(".inner tr td").each(function (j) { 
       if ($(this).hasClass("std") || $(this).hasClass("other")) { 
        totals[j] += 1; 
       } 
      }); 
     }); 

$(".halfYear tr.outertr .outer:nth-child(" + tdNum + ")").each(function() { 
      //added below line 
      $(this).find(".inner tr td").each(function (j) { 
       if ($(this).hasClass("std") || $(this).hasClass("other")) { 
        totals[j] += 1; 
       } 
      }); 
     }); 
関連する問題