0

複数のクリックイベントが発生していることはすでにたくさんあることを私は知っています。私はそれらをすべて読んだと思いますが、それでもここで何が問題になっているのかわかりません。

他の誰かが簡単に拾うことができる明らかな何かが欠けていることを完全に願っています...

いくつかの背景

私のコードはエンタープライズソーシャルネットワーキングプラットフォーム内で機能し、コンテンツ分析用のBIダッシュボードを作成します（約1000行のもので、ほとんどがドメイン固有であるため、全体を投稿するには多すぎます）。

私を悩ませているのは、ダッシュボードの視覚化自体を構築する機能です。

ここに行く...

function makePage(){
 $("#policyCount").text(policyCount);
  var docTypes=getGlobalDocTypes(polOwners); //returns a constrained vocab array
  var statusTypes=getGlobalStatusTypes(polOwners); //returns a constrained vocab array
  $.each(polOwners,function(){ // polOwners is a global array that contains the BI data to be visualised
   html=""
   var ownerName = this.name.split(":")[1]; // name is a str in format "Owner:HR"
   html += "<div id='" + ownerName + "' class='ownerData'>";
   html += "<div class='ownerHeading'>" + ownerName + "</div>";
   html += this.policies.length + " Policy documents maintained<br />"; // policies is an array of docs managed by owner

   divIDReview = "dboard_" + ownerName + "reviewchart";
   html += "<div id='" + divIDReview + "' class='dboardelement'></div>";

   divIDType = "dboard_" + ownerName + "typechart";
   html += "<div id='" + divIDType + "' class='dboardelement'></div>";

   divIDStatus = "dboard_" + ownerName + "statuschart";
   html += "<div id='" + divIDStatus + "' class='dboardelement'></div>";

   html += "<div id='" + ownerName + "ToggleTable' class='toggletable' owner='" + ownerName + "'>";
   html += "Click to display all " + ownerName + " documents<br /></div>";
   html += "<div id='" + ownerName + "polTable' class='poltable'>";
   html += getPolTable(this.policies); // Returns an HTML table of doc metadata
   html += "</div>";

   html += "</div>";
   $("#owners").append(html); // When this function is called #owners is an empty div

   $(".toggletable").mouseover(function(){
     $(this).css({'cursor':'pointer','text-decoration':'underline'});
    });

   $(".toggletable").mouseout(function(){
     $(this).css( {'cursor':'default','text-decoration':'none'});
    });


   $(".toggletable").each(function(i, elem){
    $(elem).click(function(){
      if ($(this).next(".poltable").css("display")=="none"){
       // Currently hidden - so show
       if (debug){console.log($(this).attr("id") + " was clicked")}
       $(this).html("Click to hide " + $(this).attr('owner') + " documents<br/>");
       $(this).next(".poltable").css("display","block");
       } else {
       if (debug){console.log($(this).attr("id") + " was clicked")}
       $(this).html("Click to display all " + $(this).attr('owner') + " documents<br    />");
       $(this).next(".poltable").css("display","none");
       }      
    });
   });

   // the next section calls functions that use the Google vis api to draw  pie charts

   drawPie(300,200, "Review Status", "Status", "Policies",    getReviewStatus(this.policies), ["green","orange","red"], divIDReview); 

   drawPie(300,200, "Document Types", "Type", "Docs", getDocTypes(this.policies, docTypes), [], divIDType); 


   drawPie(300,200, "Document Status", "Status", "Docs", getStatusTypes(this.policies, statusTypes), [], divIDStatus); 
 }); 
 }

うまくいけば、それは問題を説明するのに十分です。

このコードは、3つの円グラフと基になるデータのテーブルを非表示または表示するオプションで構成される各polOwnerのダッシュボード表示を構築していることがわかります。

まず、クリックイベントを.toggletableクラスに適用しました。それが複数回発生したとき.each、クラスの各インスタンスに一意のイベントをアタッチするために、ここで別の回答に記載されているメソッドを使用しました。

それで、何が起こりますか？

現在9つpolOwnersあり、一見すると、クリックイベントは他のすべてのテーブルの表示状態を切り替えているように見えます。ただし、コンソールログには、最初のインスタンスで9回、2番目のインスタンスで8回、3番目のインスタンスで7回などが起動し、奇数がテーブルを代替状態のままにしているためであることが示されています（これが機能すると、表示が次のように変わります。.toggleアニメーション）。

参考までに、私はテキストエディタの担当者ですが、HTMLのエラーチェックに役立つツールであるMS ExpressionWeb4のコピーを持っています。生成されたマークアップ全体（4000行近く）のコピーを貼り付けましたが、ネストや構造のエラーが見られません。

アイデアはありますか？

4

1 に答える 1

7

ネストされたループがいくつかあります。

// jQuery each on polOwners
$.each(polOwners,function(){
    // ... code that appends .toggletable class 

    // jQuery each on .toggletable class
    $(".toggletable").each(function(i, elem){
        // code that runs on the toggletable element
    });
});

polOwnerごとに、toggletableクラスでdivを追加します。次に、その内部で、クラスを使用して各divをループしtoggletable、クリックイベントを追加します。

これにより、最初のpolOwnerに1クリック、2番目に2クリック、3番目に3クリックというように追加されます。

toggletableそれぞれの外側にそれぞれを移動し、polOwnerあなたは良いはずです

于 2012-05-01T01:35:01.863 に答える