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：

enter image description here

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

enter image description here

编辑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-Elements的几个附加属性（附加处理程序，内部属性），使这种访问方法完全没用。

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

此外：

2）缓存你的jQuery Elements：

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

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

编辑1

编辑2

1 个答案: