1

最大 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>
4

2 に答える 2

0

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; ?>
于 2013-04-30T19:18:39.803 に答える
0

したがって、次の変更を試してください。

<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代わりに関数を使用してください。livejQuery1.7

Fiddle: http://jsfiddle.net/eznnC/ (非表示は機能していませんが、通常の環境では機能すると思います)。

于 2013-04-30T18:51:00.970 に答える