javascript - 为什么我的函数只能在 Firefox 中运行？

Question

基本上我已经继承了这段代码，其中显示/隐藏了图形，增加了计数器等。我已经在 Firefox 中将它调试到完美，但在 IE 和 Chrome 中，我收到了一个错误以及奇怪的行为。

当 console.logged 时，参数在 IE/Chrome 中显示不同且不正确，但在 Firefox 中正常，如下所示：

谁能告诉我为什么在 IE/Chrome 中无法识别函数/参数？

我下面的代码使用substr，我得到的错误是：

未捕获的类型错误：无法调用未定义的方法“substr”

在 Chrome/IE 中只是因为显然它没有显示完整长度并且只有 3 个字母长，而它应该是 15+，如 Firefox 控制台日志中所示。

更新了日志功能

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

第二个控制台日志（第 3 行）是($('#'+idSelectGraph)[0].attributes[1]);

第三个控制台日志是($('#'+idSelectGraph)[0].attributes[1].value);等的结果。

---

在 chrome/IE 中返回完整的 console.log：

Firefox 中返回的完整 console.log（正常工作）：

编辑 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 的属性进行操作的每一段代码，例如通过使用 jQuery 包装器attr()，您可以在其中通过名称或通过访问属性attributes.onclick /*or*/ attributes["onclick"]。

原因：未定义属性的顺序，使用数组表示法时可能会访问错误的属性。（在查看控制台输出时，您实际上是这样做的：IE/Chrome 获取id属性，而 FF 获取onclick属性）旧 IE 还列出了 DOM 元素的几个附加属性（附加的处理程序、内部属性），使这种访问方法完全一文不值。

这很可能会解决您的问题...

此外：

2）缓存你的jQuery元素：

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

并$graph用于每个后续调用。这将提高性能并使重构更加容易。

3) 使用split(",")(String) 而不是split(new RegExp(","))(Regex) 以获得更好的性能。

编辑以回应您的评论：

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

编辑2：

如果我正确理解了您的代码，

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