Coldfusion查詢show hide div

Question

我有一個場景，我需要顯示一個按鈕，onclick將展開並顯示其餘的值。值來自查詢。例如，如果值大於8，那麼該按鈕需要顯示。我知道這聽起來很簡單，我已經嘗試過類似下面的內容，但有沒有更好的方法來做到這一點？

<cfif getqry.recordCount neq 0> 
     <div id="topics" class="posts margin-bottom-40"> 
      <div class="headline"><h2>News </h2> 
     <cfoutput> 
     <cfloop query="getqry" startrow="1" endrow="8"> 
      <div class="btn-group hover_drop_down"> <a href="/abc.cfm?newsid=#nid#" class="btn" type="button"> #News_item# </a> </div> 
     </cfloop> 

      <cfif getqry.recordCount gt 8> 
      <div id="collapse-news" class="collapse-inline collapse"> 
        <cfloop query="getqry" startrow="9" endrow="#getqry.recordCount#"> 
          <div class="btn-group hover_drop_down"> <a href="abc.cfm?newsid=#nid#" class="btn btn-news dropdown-toggle" type="button"> #news_item# </a> </div> 
       </cfloop> 
      </div> 

     <button class="btn btn-kw-ml MoreLess" data-toggle="collapse" data-target="##collapse-news">See More</button> 
     </cfif> 
     </div> 
     </cfoutput> 
    </cfif> 

<script type="text/javascript"> 
     $('.MoreLess').click(function(){ 
       var $this = $(this); 
       $this.toggleClass('MoreLess'); 
       if($this.hasClass('MoreLess')){ 
        $this.text('See More');     
       } else { 
        $this.text('See Less'); 
       } 
     }); 
</script> 

Answer 1

我使用這種方法。

在ColdFusion的

<cfsavecontent variable = dynamicContent> 
coldfusion and html code goes here 
</cfsavecontent> 

<div id="stuffToToggle"> 
something here, maybe 
</div> 

在javascript中

<cfoutput> 
var #toScript(dynamicContent, "stuffFromColdFusion")# 
</cfoutput> 
function toggleStuff() { 
if (something) 
document.getElementById("stuffToToggle").innerHtml = stuffFromColdFusion; 
else 
document.getElementById("stuffToToggle").innerHtml = somethingElse; 
} 

的語法可能不是完美的。我只是向你展示大致的想法。

Answer 2

沒有單線解決方案。但是，通過使用query.currentRow變量來控制容器div標籤的生成，您可以簡化代碼的某位。另外，不需要cfloop和cfoutput。

<cfset hideAtRow = 9> 
... 
<cfoutput query="getQry"> 

     <!--- start container for "show more" ---> 
     <cfif getQry.currentRow eq hideAtRow > 
     <div id="collapse-news" class="collapse-inline collapse"> 
     </cfif> 

     <!--- assign classes based on current row number ---> 
     <cfset btnClass = currentRow gte hideAtRow ? "btn btn-news dropdown-toggle" : "btn"> 
     <div class="btn-group hover_drop_down"> 
     <a href="/abc.cfm?newsid=#nid#" class="#btnClass#" type="button"> #News_item# </a> 
     </div> 

     <!--- on last row, close "show more" container if needed ---> 
     <cfif getQry.currentRow eq getQry.recordCount and getQry.currentRow gte hideAtRow > 
     </div> 
     <button id="testButton" class="btn btn-kw-ml MoreLess" data-toggle="collapse" data-target="##collapse-news">See More</button> 
     </cfif> 

</cfoutput> 
...