根据条目数量添加更多链接

问题描述：

我有此代码打印出多达4个服务提供商。一旦点击，该框会展开，并显示其余的内容。我想要做的是，如果有超过4个条目，打印更多链接，以便用户知道点击更多。当点击时，我还需要更多按钮消失，并在重新点击时重新出现。根据条目数量添加更多链接

任何人都可以帮助我。这让我发疯

谢谢你提前帮忙。

<?php 
/** 
* @file 
*/ 
?> 
<head> 
<script> 
    var remove=function(){ 
     $('#ID_OF_BUTTON').hide(500); 
    } 
</script> 
</head> 
<div class="cloud-computing-item"> 
    <div class="container"> 
    <div class="item-header"> 
     <h3> <?php print $company['name'] ?> </h3> 
    </div> 
    <div class="item-subheader">  
     <div class="label">Services Offered:</div> 
     <div class="data service-offerings"> 
     <?php 
     foreach($company['services_display'] as $service => $element){ 
      print $element; 
     } 
     ?> 
     </div> 
    </div> 
    <div class="item-body"> 
     <div class="overview"> 

     <div class="label">Cloud Providers:</div> 
     <div class="data"> 
      <?php 
      //limit shown entries upto 4 
      foreach(array_slice($company['service_providers'], 0, 4) as $provider): ?> 
      <div> 
       <?php print $provider; ?> 
      </div> 
      <?php endforeach; ?>   
      <div id="show"style="color:#000099;font-weight:bold; margin-bottom:-13px;"></div> 

      <!--<div id="show"style="color:#000099;font-weight:bold; margin-bottom:-13px;"><a onclick="remove(); return true;">More</a></div> 
      <div id="hide"style="color:#000099;font-weight:bold; margin-bottom:-12px; display: none;"><a onclick="add(); return true;">Hide</a></div> --> 

     </div> 
     </div> 
     <div class="details"> 
     <?php 
      // if entries are greater then 4, show the rest 
      foreach(array_slice($company['service_providers'], 4) as $provider): ?> 
      <div> 
       <?php 
       print $provider; 
       ?> 
      </div> 
      <?php endforeach; ?> 
     <?php print theme('cloud_computing_item_details', array('company' => $company)); ?> 
     </div> 
    </div> 
    <div style="clear: both; height: 5px;">&nbsp;</div> 
    </div> 
</div>

答

所以，试试这个修改：

<div class="label">Cloud Providers:</div> 
<div class="data"> 
    <?php $i = 0; ?> 
    <?php foreach($company['service_providers'] as $provider): ?> 
    <div<?php echo ($i > 3) ? ' class="hide"' : ''; ?>><?php print $provider; ?></div> 
    <?php $i++; ?> 
    <?php endforeach; ?> 
    <?php if(count($company['service_providers']) > 4):?> 
    <div class="show-more" style="color:#000099;font-weight:bold; margin-bottom:-13px;">Show More</div> 
    <?php endif; ?> 
</div>

现在让我们假设你正在使用jQuery补充一点：

<script type="text/javascript"> 
$(document).ready(function(
    $('.hide').hide(); // this will hide all the elements with the class 'hide' 

    $('.show-more').live('click', function(){ 
     var parent = $(this).parent(); 
     parent.find('.hide').show().removeClass('hide').addClass('show'); 
     $(this).text('Show Less').removeClass('show-more').addClass('show-less'); 
    }); 

    $('.show-less').live('click', function(){ 
     var parent = $(this).parent(); 
     parent.find('.show').hide().removeClass('show').addClass('hide'); 
     $(this).text('Show Less').removeClass('show-less').addClass('show-more'); 
    }); 
){}); 
</script>

使用功能on，而不是live如果您正在使用jQuery高于1.7。

小提琴：http://jsfiddle.net/eznnC/（虽然隐藏不工作，但我相信它会在正常的环境中）。

对不起人。该解决方案看起来不错，但它打破了整个页面。 – Alan 2013-04-30 19:34:38

@Alan我没有看到一个问题，应该刹车的页面......可能你没有使用它错了...... – shadyyx 2013-04-30 19:53:01

就像你使用它。所有部分都开放了，他们增加到右边。这是我刚刚开始使用的自定义Mod的一部分。除了少数几部分都有效之外，我没有构建或设计它。我感谢你的意见 – Alan 2013-04-30 20:15:11

答

第一部分只做了4个或更多的展示更多链接如下。该链接此刻不会消失，也不会重新出现。

<?php 
      //limit shown entries upto 4 
      foreach(array_slice($company['service_providers'], 0, 4) as $provider): ?> 
      <div> 
       <?php print $provider; ?> 
      </div> 
      <?php endforeach; ?> 

      <?php 
      // shows a More link for companies with more than for providers 
      foreach(array_slice($company['service_providers'], 4, 1) as $provider): ?> 
      <div> 
       <div id="more" style="color:#000099;font-weight:bold; margin-bottom:-13px;"> 
       <?php print ('<a onclick="">More</a>'); ?> 
       </div> 
      </div> 
      <?php endforeach; ?>

根据条目数量添加更多链接

相关推荐