根据条目数添加更多链接答案

【问题标题】：adding a more link based on the number of entries根据条目数添加更多链接
【发布时间】：2013-04-30 18:07:48
【问题描述】：

我有这个代码，最多可以打印 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>

【问题讨论】：

标签： php drupal button onclick

【解决方案1】：

所以，试试这个修改：

<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 我没有看到应该中断页面的问题...可能您确实使用错误...
就像你说的那样使用。这些部分都打开了，它们向右递增。这是我刚开始使用的自定义模组的一部分。我没有建造或设计它，除了几个都可以工作的部分。谢谢你的意见

【解决方案2】：

仅使 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; ?>

【讨论】：