當編程設置類ID時，嵌套的手風琴表圖標不會改變

我在Grails .gsp頁面中嵌套了手風琴引導程序表，可以正常工作，除了圖標從「+」變爲「 - 」時摺疊/擴大。如果我取出動態ID變量並靜態設置數據目標ID，而不是使用data-target =「＃$ {orgs.ORGN}」和id =「$ {orgs.ORGN}」，則可以使其工作。當我讓g：each循環創建id和數據時，圖標不會改變，儘管它們確實會崩潰。有什麼想法嗎？有沒有什麼關於設置ID的動態，將無法正常工作？當編程設置類ID時，嵌套的手風琴表圖標不會改變

<div class="col-lg-8"> 
<div class="panel panel-default"> 
    <div class="panel-heading"></div> 
     <table class="table table-condensed" style="border-collapse:collapse;"> 
      <thead> 
      <tr> 
       <th>&nbsp;</th> 
       <th>Org</th> 
       <th>Description</th> 
       <th>Budget</th> 
       <th>YTD</th> 
       <th>Remaining</th> 
      </tr> 
      </thead> 
      <tbody> 
      <g:each in="${overview}" var="orgs"> 
       <tr data-toggle="collapse" data-target="#${orgs.ORGN}" class="accordion-toggle" style="cursor:pointer"> 
        <td><i class="fa fa-plus-square"></i></td> 
        <td>${orgs.ORGN}</td> 
        <td>${orgs.ORGNTITLE}</td> 
        <td>${orgs.BUDGET}</td> 
        <td>${orgs.YTD}</td> 
        <td>${orgs.REMAINING}</td> 
       </tr> 
       <td colspan="8" class="hiddenRow"> 
        <div class="accordian-body collapse" id="${orgs.ORGN}"> 
         <table class="table table-condensed"> 
         <thead> 
          <tr><th>Account</th> 
           <th>Title</th> 
           <th>Budgeted</th> 
           <th>YTD</th> 
           <th>Remaining</th> 
          </tr> 
          </thead> 
          <tbody> 
          <g:each in="${orgs.expenses}" var="budget"> 
           <tr> 
            <td>${budget.ACCTCODE}</td> 
            <td>${budget.ACCTTITLE}</td> 
            <td>${budget.BUDGETACCEPTED}</td> 
            <td>${budget.YTDACTIVITY}</td> 
            <td>${budget.BUDGETREMAINING}</td> 
           </tr> 
          </g:each> 
          </tbody> 
         </table> 
        </div> 
       </td> 
      </g:each> 
      </tbody> 
     </table> 
</div> 
</div>

我的JS是

$('tr').on('shown.bs.collapse', function(){ 
$(this).prev('tr').find(".fa-plus-square").removeClass("fa-plus-square").addClass("fa-minus-square"); 
}).on('hidden.bs.collapse', function(){ 
$(this).prev('tr').find(".fa-minus-square").removeClass("fa-minus-square").addClass("fa-plus-square"); 
});

感謝您的幫助。

來源

2016-11-09 Greg

確保任何值'orgs.ORGN'都不會是另一個HTML/dom元素的重複'id'。這可能是你的問題。將HTML呈現給瀏覽器後檢查您的HTML。 –

我已經在DOM上了，而且這些ID是唯一的。我甚至複製了Firebug的現有渲染輸出並粘貼到bootply中，並在粘貼時運行。我不明白爲什麼它不能自行工作。我正確的在.gsp的部分中的JS如下所示： – Greg

是的，這是有效的。當然，你還沒有在你的問題中包括一個完整的例子，所以你仍然可能會錯過簡單的東西。比如不等待文檔/ DOM準備就緒，並試圖在頭部運行你的jQuery代碼。 –

這聽起來像你正試圖在DOM完全加載之前運行你的jQuery代碼。我建議您在jQuery documentation中查看各種方法。通常這是使用$(document).ready()完成的。

來源

2016-11-10 15:33:27

當編程設置類ID時，嵌套的手風琴表圖標不會改變

回答

相關問題