5

如何使用 JQuery 仅在每列上显示前 5 次以及“更多”和“更少”链接以显示更多结果。

我所追求的类似于隐藏所有 li 元素并显示前 2 个元素并通过按钮切换它们- 但我需要更多和更少的链接来显示/隐藏每个医生的所有时间段（即：更多/更少的链接应一键显示/隐藏每位医生的 7 列）。

——这就是现在的时代——

——这就是我要寻找的结果——

--我的HTML代码--

<div class="appointmentDetails">
  <div class="staffInfo">
    <div>Dr John Doe</div>
  </div>
  <div class="appointmentInfo">
    <ul>
      <li>
        <div></div>
      </li>
      <li class="timeSlots bg">
        <div><a href="#">08:00</a></div>
        <div><a href="#">09:00</a></div>
        <div><a href="#">10:00</a></div>
        <div><a href="#">11:00</a></div>
        <div><a href="#">12:00</a></div>
        <div><a href="#">13:00</a></div>
        <div><a href="#">14:00</a></div>
        <div><a href="#">15:00</a></div>
        <div><a href="#">16:00</a></div>
        <div><a href="#">17:00</a></div>
        <div><a href="#">18:00</a></div>
      </li>
      <li class="timeSlots">
        <div><a href="#">08:00</a></div>
        <div><a href="#">09:00</a></div>
        <div><a href="#">10:00</a></div>
        <div><a href="#">11:00</a></div>
        <div><a href="#">12:00</a></div>
        <div><a href="#">13:00</a></div>
        <div><a href="#">14:00</a></div>
        <div><a href="#">15:00</a></div>
        <div><a href="#">16:00</a></div>
        <div><a href="#">17:00</a></div>
        <div><a href="#">18:00</a></div>
      </li>
      <li class="timeSlots bg">
        <div><a href="#">08:00</a></div>
        <div><a href="#">09:00</a></div>
        <div><a href="#">10:00</a></div>
        <div><a href="#">11:00</a></div>
        <div><a href="#">12:00</a></div>
        <div><a href="#">13:00</a></div>
        <div><a href="#">14:00</a></div>
        <div><a href="#">15:00</a></div>
        <div><a href="#">16:00</a></div>
        <div><a href="#">17:00</a></div>
        <div><a href="#">18:00</a></div>
      </li>
      <li class="timeSlots">
        <div><a href="#">08:00</a></div>
      </li>
      <li class="timeSlots bg">
        <div><a href="#">09:00</a></div>
      </li>
      <li class="timeSlots">
        <div><a href="#">09:00</a></div>
      </li>
      <li class="timeSlots bg">
        <div><a href="#">08:00</a></div>
      </li>
      <li>
        <div></div>
      </li>
    </ul>
  </div>
</div>
<div class="appointmentDetails">
  <div class="staffInfo">
    <div>Dr Tom Smith</div>
  </div>
  <div class="appointmentInfo">
    <ul>
      <li>
        <div></div>
      </li>
      <li class="timeSlots bg">
        <div><a href="#">08:00</a></div>
        <div><a href="#">09:00</a></div>
        <div><a href="#">10:00</a></div>
        <div><a href="#">11:00</a></div>
        <div><a href="#">12:00</a></div>
        <div><a href="#">13:00</a></div>
        <div><a href="#">14:00</a></div>
        <div><a href="#">15:00</a></div>
        <div><a href="#">16:00</a></div>
        <div><a href="#">17:00</a></div>
        <div><a href="#">18:00</a></div>
      </li>
      <li class="timeSlots">
        <div><a href="#">08:00</a></div>
        <div><a href="#">09:00</a></div>
        <div><a href="#">10:00</a></div>
        <div><a href="#">11:00</a></div>
        <div><a href="#">12:00</a></div>
      </li>
      <li class="timeSlots bg">
        <div><a href="#">10:00</a></div>
      </li>
      <li class="timeSlots">
        <div><a href="#">10:00</a></div>
      </li>
      <li class="timeSlots bg">
        <div><a href="#">10:00</a></div>
      </li>
      <li class="timeSlots">
        <div><a href="#">10:00</a></div>
      </li>
      <li class="timeSlots bg">
        <div><a href="#">10:00</a></div>
      </li>
      <li>
        <div></div>
      </li>
    </ul>
  </div>
</div>

--这是我的 HTML/JAVASCRIPT/CSS 的现场演示--

http://jsfiddle.net/rR26n/

4

4 回答 4

1

给你：http: //jsfiddle.net/eqmgy/

您需要添加

            <div class="less"><a href="#">Less</a>
            </div>
            <div class="more"><a href="#">More</a>
            </div>

在每个结束时<li class="timeSlots"></li>

和js：

var showMore = function () {
    $(this).find('div').css('display', 'block');

    $(this).find('.more').css('display', 'none');
    $(this).find('.less').css('display', 'block');
    $(this).find('.less').click($.proxy(showLess, $(this)));

};

var showLess = function () {
    $(this).find('div').each(function(index, div) {
        if(index > 5) {
            $(div).css('display', 'none');
        }
    });

    $(this).find('.less').css('display', 'none');
    $(this).find('.more').css('display', 'block');

    $(this).find('.more').click($.proxy(showMore, $(this)));

};

$('.timeSlots').each(function (index, timeslot) {
    $.proxy(showLess, timeslot)();
});

编辑 ：

让我们自动添加更多/更少，所以当 number < 5 时它不会启动：

$('.timeSlots').each(function (index, timeslot) {
            if(timeslot.find('div').length > 5) {
                 timeslot.append('<div class="more"><a href="#">More</a></div>');
                 timeslot.append('<div class="less"><a href="#">Less</a></div>');
                 $.proxy(showLess, timeslot)();
            }
});
于 2013-02-28T14:30:04.343 回答
1

在我们找到“解决方案”之前：您的标记不是很语义化。您正在显示时间列表，因此时间应该在列表中，而不是 DIV。这些列表可以向左浮动或内联阻塞，您可以摆脱标记中的许多杂物。

假设你现在有你的时间在这样的列表中：

<ul class="timeList">
   <li class="timeSlot">8:00</li>
   <li class="timeSlot">9:00</li>
   ...
   <li class="timeSlot">18:00</li>
</ul>

你想做几件事：

  1. 如果列表有超过 5 个插槽，则隐藏 #5 之后的所有内容，并添加更多链接。
  2. 单击 MORE 链接时，显示 #5 之后的所有内容，然后更改为 LESS 链接
  3. 单击 LESS 链接时，隐藏 #5 之后的所有内容并更改回 MORE 链接

如果您还没有使用 jQuery，我建议您使用它，因为它使事情变得容易得多，所以我关于如何做这些事情的建议使用它。

对于数字 1，您可以隐藏某个索引之后的元素，如下所示：

       jQuery(".someClass").children(":gt(4)").hide();

这将隐藏第 5 个和更多元素。但是：这也会隐藏所有其他列表的 LI，因为上面的代码将每个列表的所有子项放在一个大集合中，然后在第 5 个元素之后将它们全部隐藏。所以你想要做的是遍历每个列表并只隐藏它的孩子。

我在这里创建了一个示例，将它们变为红色而不是隐藏它们，以便您可以直观地看到发生了什么：

jQuery(function () {
    jQuery(".timeList").each(function () {
        jQuery(this).children(":gt(4)").css('color','red');
    });
});

你可以在这里看到它的作用：http: //jsfiddle.net/7PeVj/

对于#2，您需要检查每个列表是否超过 5 个，并添加一个 MORE 链接。由于我们已经在遍历每个列表，我们可以在那里实现该代码。您可以使用children结果的长度来查看是否有超过5个，然后使用jQuery的append()函数添加一个按钮。

这是一个例子。请注意，我们现在只要求孩子timeSlots 

    jQuery(".timeList").each(function () {
        // reference to the list
        var theList = jQuery(this);
        // reference to it's LIs that have .timeSlot
        var kids = theList.children(".timeSlot");
        // manipulate after element 5
        kids.filter(":gt(4)").css('color','red');
        //add a MORE link if we have more than 5
        if (kids.length > 5) {
            theList.append('<li class="slotMoreLess">MORE</li>');
        }
    });

工作示例：http: //jsfiddle.net/7PeVj/2/

最后，您需要“连接” MORE / LESS 以适当地隐藏和显示项目。您需要使用 jQueryon()为这些按钮附加处理程序，因为它们在页面加载时不存在。

同样，工作示例位于：http: //jsfiddle.net/7PeVj/4/

隐藏和显示您可以使用您在上面的代码中看到的内容。您可以检查并设置text()MORE 列表项的 以在 LESS 和 MORE 之间来回切换并根据需要隐藏显示。

于 2013-02-28T15:07:08.870 回答
0

一种可能的解决方案：

$timeSlots = $('.timeSlots');
$timeSlots.each(function() {
    var $times = $(this).children();
    if ($times.length > 5) {
        $timeSlots.children(':nth-of-type(n+6)').hide();
        $(this).append('<span class="more-times">+More</span>');
    }
});

$timeSlots.on('click', '.more-times', function() {
    $(this).prevAll().show().end().remove();
});

只需在DOMready.

http://jsfiddle.net/dfsq/rR26n/6/

于 2013-02-28T14:12:13.667 回答
0

尝试这个：

http://jsfiddle.net/rR26n/8

// hide all times and then show the first 5
var hideTimes = function() {
    $('.timeSlots').each(function () {
        $(this).children('div').hide().filter(':lt(5)').show();
    });
}

// show all times
var showTimes = function() {
    $('.timeSlots > div').show();
}

$('.show').click(function () {
    showTimes();
});

$('.hide').click(function () {
    hideTimes();
});

hideTimes();

这是一个一键式示例：http: //jsfiddle.net/rR26n/9/

这两个示例都需要进行一些改进，以防止按钮作用于 .appointmentDetails 的所有实例。您可以使用 ID 或通过类索引来做到这一点。

于 2013-02-28T14:17:57.920 回答