javascript - 関数が Firefox でしか機能しないのはなぜですか?

Question

基本的に、グラフの表示/非表示、カウンターの増加など、このコードを継承しました。Firefox で完全にデバッグしましたが、IE と Chrome では、奇妙な動作とともにエラーが発生します。

console.logged の場合、パラメータは IE/Chrome では異なって正しく表示されませんが、Firefox では次のように問題ありません。

関数/パラメータが IE/Chrome で認識されない理由を誰か教えてもらえますか?

以下の私のコードは使用してsubstrおり、私が得ているエラーは次のとおりです。

キャッチされていない TypeError: 未定義のメソッド 'substr' を呼び出せません

Chrome/IE では、Firefox コンソール ログに示されているように 15+ であるはずなのに、明らかに全長が表示されておらず、長さが 3 文字しかないためです。

ログで更新された機能

  function loadGraphs(idTreeview,idSelectGraph)
{

    console.log("loadGraphs function");
    var count=0;

    var fn=$('#'+idSelectGraph)[0].attributes[1].value;

    console.log("fn  = " + fn);

    fn=fn.substr(12).substr(0,fn.length-2);

    var flags=fn.split(new RegExp(","));
    console.log("value of flags = " + flags);
    var data=''; 
    console.log("value of fn = " + fn);

    console.log("value of # + idSelectGraph = " + $('#'+idSelectGraph));

    var idInstanceTreeview = idTreeview;

if($('#counterTreeviewUL'+idInstanceTreeview).length == 0) 
    {

    console.log('If length is 0 then do nothing');

      var fnInstance=$('#'+idSelectGraph)[0].attributes[1].value;

      console.log('If length is 0 then do nothing 2');


    var flagsInstance=fnInstance.split(new RegExp(","));

    console.log('If length is 0 then do nothing 3');    

    console.log("fn = " + fn);
    console.log("flags = " + flags);
    console.log("flagsInstance = " + flagsInstance);

    var graph = {
            id: seqId,
            entityName: flags[6].substr(1).substr(0, flags[6].length - 2),
            entity: flags[5].substr(1).substr(0, flags[5].length - 2),
            idCounter: flags[4],
            counterName: flags[3].substr(1).substr(0, flags[3].length - 2),
            ivmanager: flags[7].substr(1).substr(0, flags[7].length - 2),
            chart: null,
            pointsToShowX: null,
            borneInf: null,
            unite: "",
            idInstance: flagsInstance[2].substr(1).substr(0, flagsInstance[2].length - 2),
            instanceName: flagsInstance[3].substr(1).substr(0, flagsInstance[3].length - 2),
            listPdsNull: new Array(),
            countInstance: idTreeview + "_" + i,
            countGraph: -1
        };


    console.log('If length is 0 then do nothing 4');

    seqId++;
    graphs[graphsLastId]=graph;
    graphsLastId++;

    }

else 
  {
    console.log('Else if length is not 0');
    for(var i=0;i<$('#counterTreeviewUL'+idInstanceTreeview)[0].children.length;i++)
        ($('#counterTreeviewUL'+idInstanceTreeview)[0].children[i].children[0].checked)?++count:count;

    if ($('#counterTreeviewUL'+idInstanceTreeview)[0].children.length == count)
    {
        console.log('If length is equal to count');
        $('#'+idSelectGraph)[0].checked=true;
        $('#'+idSelectGraph)[0].indeterminate=false;
    }
    else if (count==0)
    {
        console.log('Else if length is equal to 0');
        $('#'+idSelectGraph)[0].checked=true;       
        $('#'+idSelectGraph)[0].indeterminate=false;        
    }
    else
    {
        console.log('Else if none of them conditions are true');
        $('#'+idSelectGraph)[0].checked=true;
        $('#'+idSelectGraph)[0].indeterminate=false;
    }


   for (var i=0;i<$('#counterTreeviewUL'+idTreeview)[0].children.length;i++)
   {

        if (!$('#counterTreeviewUL'+idTreeview)[0].children[i].children[0].checked)
        {   
            $('#counterTreeviewUL'+idTreeview)[0].children[i].children[0].checked=true;

            var fnInstance=$('#counterTreeviewUL'+idTreeview)[0].children[i].children[0].attributes[1].value;
            console.log('fnInstance (1) = ' + fnInstance);

            fnInstance=fnInstance.substr(15).substr(0,fnInstance.length-2);
            console.log('fnInstance (2) = ' + fnInstance);

            var flagsInstance=fnInstance.split(new RegExp(","));
            console.log('flagsInstance = ' + flagsInstance);


              console.log("fn = " + fn);
              console.log("flags = " + flags);
              console.log("flagsInstance = " + flagsInstance);

            console.log('This is the substr error in Chrome');


            var graph = {
                    id: seqId,
                    entityName: flags[6].substr(1).substr(0, flags[6].length - 2),
                    entity: flags[5].substr(1).substr(0, flags[5].length - 2),
                    idCounter: flags[4],
                    counterName: flags[3].substr(1).substr(0, flags[3].length - 2),
                    ivmanager: flags[7].substr(1).substr(0, flags[7].length - 2),
                    chart: null,
                    pointsToShowX: null,
                    borneInf: null,
                    unite: "",
                    idInstance: flagsInstance[2].substr(1).substr(0, flagsInstance[2].length - 2),
                    instanceName: flagsInstance[3].substr(1).substr(0, flagsInstance[3].length - 2),
                    listPdsNull: new Array(),
                    countInstance: idTreeview + "_" + i,
                    countGraph: -1
                };


            console.log('Does it fail after var graph?');

            seqId++;        
            graphs[graphsLastId]=graph;     
            graphsLastId++;
        }
    }

 }
    graphsToLoad=false;
    console.log("before updateAllGraphs");
    updateAllGraphs();
    console.log("after updateAllGraphs");
    loading=false;

    if($('#counterTreeviewUL'+idInstanceTreeview).length == 0)
    {

      if($('#'+idSelectGraph)[0].checked)
          {
             console.log("If it is checked then execute countSelectedGraphs(1)");
           countSelectedGraphs(graphsLastId, flags[5].substr(1).substr(0,flags[5].length-2), 0);
          }
      else 
          {
             console.log("If it is not checked then execute countSelectedGraphs(0)");
           countSelectedGraphs(graphsLastId, flags[5].substr(1).substr(0,flags[5].length-2), 0);
          }
    }

    else 
    {
            console.log("If it is not equal to 0 then execute countSelectedGraphs(0)");
          countSelectedGraphs(graphsLastId, flags[5].substr(1).substr(0,flags[5].length-2), 0);

    }
}

---

最初のコンソール ログ(2 行目) は、次の結果です。($('#'+idSelectGraph)[0]);

2 番目のコンソール ログ(3 行目) は、次の結果です。($('#'+idSelectGraph)[0].attributes[1]);

3 番目のコンソール ログは、($('#'+idSelectGraph)[0].attributes[1].value);etcの結果です。

---

chrome/IE で返される完全な console.log:

完全な console.log が Firefox で返されます (正常に動作します):

編集1

上記のすべてを修正しました。唯一の問題は、以前の個々のグラフとは対照的に、表示されたグラフが最初に見つかったグラフと同じになるように置き換えた行です。このコードは、私のアプリケーションが IE と Chrome で動作することを意味するため優れていますが、このエラーは解決する必要があり、報酬が与えられます:

元のコード (すべてのグラフは正しく表示されましたが、IE/Chrome では機能しませんでした)

var fnInstance=$('#counterTreeviewUL'+idTreeview)[0].children[i].children[0].attributes[1].value;

新しいコード (Chrome/IE で動作しますが、最初に見つかったグラフのみが表示されます)

$el = $('#counterTreeviewUL'+idTreeview).first();
            var fnInstance = $el.find("input").attr("onclick");

新しいコードを微調整してすべてのグラフを正常に取得する方法を誰か教えてもらえますか (おそらくi変数と関係があります)。

編集2

編集後、私のforループは次のようになります。

   for (var i=0;i<$('#counterTreeviewUL'+idTreeview)[0].children.length;i++)
   {

        if (!$('#counterTreeviewUL'+idTreeview)[0].children[i].children[0].checked)
        {   
            $('#counterTreeviewUL'+idTreeview)[0].children[i].children[0].checked=true;


    This works in Firefox but not in Chrome/IE  //  var fnInstance=$('#counterTreeviewUL'+idTreeview)[0].children[i].children[0].attributes[1].value;

            This works in all but only displays first graph //

            $el = $('#counterTreeviewUL'+idTreeview).first();
            var fnInstance = $el.find("input").attr("onclick");

            fnInstance=fnInstance.substr(15).substr(0,fnInstance.length-2);


            var flagsInstance=fnInstance.split(new RegExp(","));


            var graph = {
                    id: seqId,
                    entityName: flags[6].substr(1).substr(0, flags[6].length - 2),
                    entity: flags[5].substr(1).substr(0, flags[5].length - 2),
                    idCounter: flags[4],
                    counterName: flags[3].substr(1).substr(0, flags[3].length - 2),
                    ivmanager: flags[7].substr(1).substr(0, flags[7].length - 2),
                    chart: null,
                    pointsToShowX: null,
                    borneInf: null,
                    unite: "",
                    idInstance: flagsInstance[2].substr(1).substr(0, flagsInstance[2].length - 2),
                    instanceName: flagsInstance[3].substr(1).substr(0, flagsInstance[3].length - 2),
                    listPdsNull: new Array(),
                    countInstance: idTreeview + "_" + i,
                    countGraph: -1
                };


        }

Answer 1

コードにいくつかの問題があります。

1）配列表記を介してdom-Elementの属性を操作するすべてのコードを置き換えます。たとえば、attr()名前またはを介して属性にアクセスできるjQueryラッパーを使用しますattributes.onclick /*or*/ attributes["onclick"]。

理由：属性の順序が定義されていません。配列表記を使用すると、間違った属性にアクセスする可能性があります。（コンソール出力を見るときに実際に行うこと：IE / Chromeはid属性をフェッチし、FFは属性をフェッチしonclickます）古いIEは、DOM要素のいくつかの追加属性（接続されたハンドラー、内部属性）もリストし、このアクセス方法を完全に作成します価値がない。

これで問題が解決する可能性があります...

さらに：

2）jQuery要素をキャッシュします。

var $graph = $('#'+idSelectGraph);

$graph代わりに、後続の各呼び出しに使用します。これにより、パフォーマンスが向上し、リファクタリングがはるかに簡単になります。

3）パフォーマンスを向上させるために、（正規表現）のsplit(",")代わりに（文字列）を使用split(new RegExp(","))します。

あなたのコメントに応じて編集してください：

var fnInstance= $('#counterTreeviewUL'+idTreeview)[0]
                              .children[i].children[0].attribu‌tes[1].value;

次のようになります。

$el = $('#counterTreeviewUL'+idTreeview).first();
var fnInstance = $el.find("id/class/name of the node").attr("name");

EDIT2：

私があなたのコードを正しく理解していれば、

for (var i=0;i<$('#counterTreeviewUL'+idTreeview)[0].children.length;i++)
   {

        if (!$('#counterTreeviewUL'+idTreeview)[0].children[i].children[0].checked)
        {   
            $('#counterTreeviewUL'+idTreeview)[0].children[i].children[0].checked=true;
            $el = $('#counterTreeviewUL'+idTreeview).first();
            var fnInstance = $el.find("input").attr("onclick");

このように見えるはずです

$('#counterTreeviewUL'+idTreeview).first().children().each(function(){

       $el = $(this).children().first();

       if (!$el.prop("checked")){
          $el.prop("checked",true);
          var fnInstance = $el.attr("onclick");