为什么我的功能仅适用于Firefox？

Question

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

当console.logged,IE/Chrome中的参数显示不同且不正确,但在Firefox中就好了,如下所示:

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

我下面的代码使用substr,我得到的错误是:

未捕获的TypeError:无法调用未定义的方法'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获取id属性时,IE/Chrome获取onclick属性)旧IE还列出了DOM-Elements(附加处理程序,内部属性)的几个附加属性,使这种访问方法完全一文不值.

这应该很可能解决你的问题......

另外:

2)缓存你的jQuery Elements:

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

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