Как применить усеченные / скрытые элементы списка из нескольких списков на странице?

Question

У меня есть этот удобный фрагмент [см. Ниже], который усекает набор элементов списка до заданной суммы, используя jQuery.Тем не менее, я застрял на том, как изменить этот скрипт для работы с несколькими списками на странице.Можете ли вы помочь?

Предположим, у меня есть 5 списков из 100 пунктов на странице.Как я могу динамически скрывать различное количество элементов списка в каждом списке?

Вот как это работает в настоящее время (с одним списком на страницу):

<script>
function ShowItems() {
    if (Count > $("ul.truncateList > li").size()) { Count = $("ul.truncateList > li").size() };
    $("ul.truncateList > li:lt(" + Count + ")").show();
    $("ul.truncateList > li:gt(" + (Count - 1) + ")").hide();
}

(function($){
    var listItems = $('ul.truncateList').data('listItems');
    Count= listItems;
    ShowItems();
    $('.listHide').toggle();
    $('.listShow').click(function(){
        Count = 100000;
        ShowItems();
        $('.listShow').toggle();
        $('.listHide').toggle();
    });
    $('.listHide').click(function(){
        Count = listItems;
        ShowItems();
        $('.listShow').toggle();
        $('.listHide').toggle();
    });

})(jQuery);
</script>

Использование:

<ul class="truncateList" data-listItems="25">
    <li>One</li>
    ....
    <li>Twenty Six</li>
</ul>
<span class="listShow">View All</span>
<span class="listHide">View Less</span>

Двадцать шестой элемент списка (и более) будет скрыт до нажатия «Просмотреть все».Но если я помещу второй список на той же странице с классом truncateList, он не будет работать.

Я определенно открыт для более элегантных решений для всей проблемы визуального скрытия длинных списков допользователь хочет читать больше (100% на стороне клиента).

Answer 1

Для нескольких списков, eack со своими собственными «показать / скрыть», объединить эти 2 диапазона и поставить элемент управления после каждого списка следующим образом:

<ul class="truncateList" data-list-items="2">
    <li>One</li>
    ...
</ul>
<button class="ShowHideFullLists" type="button">View All</button>

<h2>Second list:</h2>
<ul class="truncateList" data-list-items="4">
    <li>A 1</li>
    ...
</ul>
<button class="ShowHideFullLists" type="button">View All</button>

Тогда будет работать следующий код. См. Это в действии на jsFiddle.

$('.ShowHideFullLists').click (ShowHideFullLists);
$('.ShowHideFullLists').click ();  //-- Init list displays.

function ShowHideFullLists () {
    var showHideBtn = $(this);
    var bShowEm     = showHideBtn.data ('bShowEm')  ||  false;

    /*--- Find the list for this button. It is a previous sibling,
        in the HTML.
    */
    var thisBtnsList    = showHideBtn.prev ("ul.truncateList");

    //--- Show either all or the # from the data-list-items attribute.
    ShowItems (thisBtnsList, bShowEm, thisBtnsList.data('listItems'));

    //--- Update the show-all flag.
    bShowEm ^= true;
    showHideBtn.data ('bShowEm', bShowEm);

    //--- Update the button text.
    if (bShowEm)
        showHideBtn.text ('View All');
    else
        showHideBtn.text ('View Less');
}

function ShowItems (parentNode, bShowAll, numVisible) {

    if (bShowAll)
        parentNode.find ("> li").show ();
    else {
        parentNode.find ("> li:lt(" +  numVisible    + ")").show ();
        parentNode.find ("> li:gt(" + (numVisible-1) + ")").hide ();
    }
}

---

---

Для одной кнопки, чтобы управлять всеми списками...

Тогда ShowHideFullLists изменяется следующим образом. Смотрите это в действии на jsFiddle. :

ShowHideFullLists ();   //-- Init list displays.

//--- Activate the show/hide button.
$('#ShowHideFullLists').click (ShowHideFullLists);

function ShowHideFullLists () {
    var showHideBtn = $('#ShowHideFullLists');
    var bShowEm     = showHideBtn.data ('bShowEm')  ||  false;

    //--- Loop through all the different lists.
    $("ul.truncateList").each ( function () {
        /*--- Show all or the number defined in the 
            data-list-items attribute.
        */
        if (bShowEm)
            ShowItems ( $(this), true);
        else {
            var jThis   = $(this);
            ShowItems (jThis, false, jThis.data ('listItems') );
        }
    } );

    //--- Update the show-all flag.
    bShowEm ^= true;
    showHideBtn.data ('bShowEm', bShowEm);

    //--- Update the button text.
    if (bShowEm)
        showHideBtn.text ('View All');
    else
        showHideBtn.text ('View Less');
}

Также обратите внимание на чувствительность к регистру и рефакторинг черточки в HTML 5 data- атрибуты .

Answer 2

Я бы обернул свои списки в родительские div

<div class="truncateList">
  <ul data-listItems="2">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
  <span class="listshow">View All</span>
  <span class="listhide">View Less</span>
</div>
<div class="truncateList">
  <ul data-listItems="3">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
  <span class="listshow">View All</span>
  <span class="listhide">View Less</span>
</div>

А затем с помощью этого кода правильно скрыть элементы при загрузке

$(".truncateList").each(function(e){
  var list = $("ul", this);
  var count = list.data("listitems") - 1;
  $("li:gt(" + count + ")", list).hide();
});

И подключить события клика, чтобы показать / скрыть списки

$(".listshow").click(function(e){
  var list = $("ul", $(this).parent());
  var count = list.data("listitems") - 1;
  $("li", list).show();
});

$(".listhide").click(function(e){
  var list = $("ul", $(this).parent());
  var count = list.data("listitems") - 1;
  $("li:gt(" + count + ")", list).hide();
});