javascript - 为什么我的功能只能在Firefox中使用？

基本上，我继承了这段代码，其中图形显示/隐藏、计数器增加等。我在Firefox中调试得非常完美，但在IE和Chrome中，我收到了一个错误以及奇怪的行为。
当console.logged时，IE/Chrome中的参数看起来不同且不正确，但Firefox中的参数很好，如下所示：
有谁能告诉我为什么IE/Chrome不能识别功能/参数吗？
下面的代码使用substr，我得到的错误是：
Uncaught TypeError:无法调用未定义的方法“substr”
在Chrome/IE中只是因为它没有显示完整的长度，只有3个字母长，而在Firefox控制台日志中显示的长度应该是15+。
用日志更新函数

  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
                };


        }

最佳答案

代码中有几个问题：
1）替换通过数组表示法操作dom元素属性的每一段代码，例如使用jQuery包装器attr()，在这里您可以通过名称或attributes.onclick /*or*/ attributes["onclick"]访问属性。
原因：未定义属性的顺序，使用数组表示法时可能会访问错误的属性。（在查看控制台输出时，您实际上是这样做的：IE/Chrome获取id属性，而FF获取onclick属性）旧的IEs还列出了DOM元素的几个附加属性（附加的处理程序、内部属性），使得这种访问方法完全没有价值。
这很可能会解决你的问题。。。
另外：
2）缓存jQuery元素：

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

并在随后的每次调用中使用$graph。这将提高性能并使重构更加容易。
3）使用split(",")（字符串）而不是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");

关于javascript - 为什么我的功能只能在Firefox中使用？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13120189/