Как я могу скрыть элементы в моем списке и добавить функцию «Показать больше»? - PullRequest
Новая
       9

Как я могу скрыть элементы в моем списке и добавить функцию «Показать больше»?

6 голосов
/ 03 июля 2011

Я использую JavaScript для построения списка результатов. У меня есть цикл for, который перебирает некоторые данные, создает div mydata и добавляет его к div результатов. Давайте представим, что это выглядит примерно так: 

<div id="results">
    <div class="mydata">data 1</div>
    <div class="mydata">data 2</div>
    ...
    <div class="mydata">data 20</div>
</div>

Что я хочу сделать, это отображать только 5 результатов за раз , и, если пользователь желает увидеть больше, он может щелкнуть показать следующие 5 или показать кнопка (или что-то подобное). Есть идеи?

Просто чтобы уточнить, каждый раз, когда пользователь нажимает «показать больше», я хочу «показать» следующие 5 элементов, а не ВСЕ оставшиеся элементы. Таким образом, каждый клик показывает больше элементов, пока все не отображаются.

Ответы [ 6 ]

11 голосов
/ 03 июля 2011

Здесь вы можете использовать селекторы gt() и lt() вместе с :visible.

Далее будут показаны следующие 5 результатов при нажатии и удалена ссылка, как только все элементы будут видны. 

$('.mydata:gt(4)').hide().last().after(
    $('<a />').attr('href','#').text('Show more').click(function(){
        var a = this;
        $('.mydata:not(:visible):lt(5)').fadeIn(function(){
         if ($('.mydata:not(:visible)').length == 0) $(a).remove();   
        }); return false;
    })
);

рабочий пример: http://jsfiddle.net/niklasvh/nTv7D/

Независимо от того, что другие люди предлагают здесь, я бы не скрыл элементы с помощью CSS, но сделал бы это вместо этого в JS, потому что, если пользователь отключил JS и вы скрыли элементы с помощью CSS, он не сделает их видимыми. Однако, если у него отключен JS, они никогда не будут скрыты, и эта кнопка не будет отображаться и т. Д., Поэтому у нее есть полный запасной носкрипт на месте + поисковым системам не нравится скрытый контент (но они не будут знать, скрыт ли он, если вы сделать это при загрузке DOM).

3 голосов
/ 03 июля 2011

Мое решение здесь: jsFiddle .

Вы можете разместить эту ссылку где-нибудь: 

<a href="#" title="" id="results-show-more">show more</a>

и используйте следующий код: 

var limit = 5;
var per_page = 5;
jQuery('#results > div.mydata:gt('+(limit-1)+')').hide();
if (jQuery('#results > div.mydata').length <= limit) {
    jQuery('#results-show-more').hide();
};

jQuery('#results-show-more').bind('click', function(event){
    event.preventDefault();
    limit += per_page;
    jQuery('#results > div.mydata:lt('+(limit)+')').show();
    if (jQuery('#results > div.mydata').length <= limit) {
        jQuery(this).hide();
    }
});

, где limit - текущее количество отображаемых результатов, а per_page - количество результатов, отображаемых при каждом нажатии кнопки «показать больше». Ссылка исчезает, если отображаются все результаты. Посмотрите, как это работает на jsFiddle .

1 голос
/ 03 июля 2011

Это должно сработать ... Дайте мне знать, как это происходит 

<script type="text/javascript">
  function ShowHide(id) { $("#" + id).toggle(); }
</script>
<div id="results">
    <div class="mydata">data 1</div>
    <div class="mydata">data 2</div>
    <div class="mydata">data 3</div>
    <div class="mydata">data 4</div>
    <div class="mydata">data 5</div>

    <div style="clear:both" onclick="ShowHide('grp6')">More</div>
    <div id="grp6" style="display:none">
      <div class="mydata">data 6</div>
      <div class="mydata">data 7</div>
      <div class="mydata">data 8</div>
      <div class="mydata">data 9</div>
      <div class="mydata">data 10</div>
    </div>
    <div style="clear:both" onclick="ShowHide('grp11')">More</div>
    <div id="grp11" style="display:none">
      <div class="mydata">data 11</div>
      <div class="mydata">data 12</div>
      <div class="mydata">data 13</div>
      <div class="mydata">data 14</div>
      <div class="mydata">data 15</div>
    </div>
</div>

В вашем forloop, вы также должны добавить эти divs скрытый контейнер 

<div style="clear:both" onclick="ShowHide('grp6')">More</div>
    <div id="grp6" style="display:none">

Вы поняли идею.

1 голос
/ 03 июля 2011

Создайте класс с чем-то вроде: 

.hidden_class{
  display: none;
}

Добавьте этот класс ко всем элементам mydata, которые вы не хотите видеть.когда пользователь нажимает кнопку, удалите ее из следующих 5 делений.

повторять каждый раз, когда пользователь нажимает кнопку «читать дальше»

1 голос
/ 03 июля 2011

Вы можете создать класс CSS, например: 

.hiddenData { display: none }

и присоединить его к любому количеству элементов div, превышающему 5.

После этого создайте обработчики для добавления / удаления этого класса изнеобходимое количество делений.

jQuery для удаления класса: 

$(".hiddenData").removeClass("hiddenData")
0 голосов
/ 03 июля 2011

Здесь у вас есть: 

   <style>
      /*This hides all items initially*/
      .mydata{
         display: none;
      }
   </style>

Теперь скрипт 

   <script>
      var currentPage = 1; //Global var that stores the current page
      var itemsPerPage = 5;
      //This function shows a specific 'page'
      function showPage(page){
          $("#results .mydata").each(function(i, elem){
              if(i >= (page-1)*itemsPerPage && i < page*itemsPerPage) //If item is in page, show it
                $(this).show();
              else
                $(this).hide();
          });
          $("#currentPage").text(currentPage);
      }
      $(document).ready(function(){
          showPage(currentPage);
          $("#next").click(function(){
             showPage(++currentPage);
          });
          $("#prev").click(function(){
             showPage(--currentPage);
          });
      });
   </script>

И образец HTML: 

   <div id="results">
      <div class="mydata">data 1</div>
      <div class="mydata">data 2</div>
      <div class="mydata">data 3</div>
      <div class="mydata">data 4</div>
      <div class="mydata">data 5</div>
      <div class="mydata">data 6</div>
      <div class="mydata">data 7</div>
      <div class="mydata">data 8</div>
      <div class="mydata">data 9</div>
      <div class="mydata">data 10</div>
      <div class="mydata">data 11</div>
      <div class="mydata">data 12</div>
   </div>   
   <a href="javascript:void(0)" id="prev">Previous</a>
   <span id="currentPage"></span>
   <a href="javascript:void(0)" id="next">Next</a>

Единственное, что осталось сделать, - это проверить, чтобы страница не заходила на страницу ниже 1 и выше, чем общая сумма. Но это будет легко.

РЕДАКТИРОВАТЬ : Здесь у вас это работает: http://jsfiddle.net/U8Q4Z/

Надеюсь, это поможет. Приветствия.

...