2016-04-29 63 views
1

我有一个场景,我需要显示一个按钮,onclick将展开并显示其余的值。值来自查询。例如,如果值大于8,那么该按钮需要显示。我知道这听起来很简单,我已经尝试过类似下面的内容,但有没有更好的方法来做到这一点?Coldfusion查询show hide div

<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> 

回答

-2

我使用这种方法。

在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; 
} 

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

0

没有单线解决方案。但是,通过使用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> 
...