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

没有一线解决方案。但是，您可以使用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>
...

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

语法可能不完美。我只是告诉你一般的想法。

Coldfusion查询显示隐藏div

2 个答案: