Question

我有很多像这样的div：

<div id="company_group_{{ $id }}_client" class="btn-group-vertical btn-block" role="group">
   <button class="btn btn-default update__remodal_btn">
      Ray Darrick Tromp
   </button>
   <button class="btn btn-default update__remodal_btn">
      Susan Stone
   </button>
    ...
   <div id="more">
      <a href="#" class="loadMore" data-list="company_group_{{ $id}}_client">
         Show more
      </a>
   </div>
</div>

和JS代码：

$(function () {
    $(".update__remodal_btn").slice(0, 4).show();

    $(".loadMore").on('click', function (e) {
        e.preventDefault();
        var buttons = $("#"+ $(this).data('list'));

        buttons.slice(0, 4).slideDown();

        if (buttons.length == 0) {
            $(this).fadeOut('slow');
        } else {
            $(this).text("Show remaining ("+ buttons.length +")");
        }
    });
});

但这改变了Show remaining总是在1上，为什么呢？我需要在DIV中显示更多（例如，接下来的5个）元素，我点击了Show more...

Answer 1

代码中的问题似乎如下： var buttons = $（＆＃34;＃＆＃34; + $（this）.data（＆＃39; list＆＃39;））;

我添加了更多按钮，并使用了以下内容： $（＆＃34; .update__remodal_btn＆＃34）。了slideDown（1000）; 点击显示更多信息后，它显示了我剩下的按钮。

当我添加更多按钮时，它显示所有按钮，按照代码显示它们应该只显示4。我首先隐藏所有按钮，然后切片显示其中的4个请按照以下plnkr链接 https://plnkr.co/edit/cNoTanD2rQR6dczC25Bv?p=preview 我希望这有助于enter code here

jquery - 加载下一个不起作用的元素

1 个答案: