добавление дополнительной ссылки в зависимости от количества записей

У меня есть этот код, который выводит до 4 поставщиков услуг. после щелчка, окно расширяется и показывает остальное, если их больше. То, что я пытаюсь сделать, это если есть более 4 записей, чтобы напечатать ссылку More, чтобы пользователи знали, что нужно щелкнуть дальше. Мне также нужно, чтобы кнопка «Больше» исчезла, когда щелкнуть и снова появиться при повторном щелчке.добавление дополнительной ссылки в зависимости от количества записей

Может кто-нибудь мне помочь. Это сводит меня с ума

Благодарим вас за помощь заблаговременно.

<?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>

источник

2013-04-30 Alan

Итак, попробуйте эту модификацию:

<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.

Fiddle: http://jsfiddle.net/eznnC/ (хотя скрытие не работает, но я считаю, что это будет в нормальной среде).

источник

2013-04-30 18:51:00 shadyyx

извините, человек. решения выглядят хорошо, но он сломал всю страницу. – Alan

@Alan Я не вижу проблемы, которая должна тормозить страницу ... Возможно, вы использовали ее неправильно ... – shadyyx

используется так же, как вы ее положили. все секции открылись, и они увеличились вправо. это часть пользовательского мода, с которым я только начал работать. Я не создавал и не проектировал его, кроме нескольких частей, которые все работали. я благодарю вас за ваш вклад – Alan

первая часть, чтобы сделать только 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-30 19:18:39 Alan

добавление дополнительной ссылки в зависимости от количества записей

ответ

Смежные вопросы