javascript - Coldfusion查询显示隐藏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

没有单一的解决方案。不过，您可以稍微简化代码，方法是使用 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>
...