javascript - 仅当使用 jquery 或 javascript 有多个页码时才显示第一页和最后一页？

Question

我有两个这样的按钮：

 <button class="next_prev" onclick="" id="first_buttons" disabled>{{ pages.first }}</button>
<button class="next_prev" onclick="" id="last_buttons" disabled>{{ pages.last }}</button>

如果默认只有一页，页面 {{ pages.first }} 和 {{ pages.last }} 存储页码 1 和 1 并显示它。但是如果页码大于 1，我只想显示这两个按钮。我得到的页面长度如下：

<p> <span>{% get_pages %} {{ pages|length }} pages</span> </p>

可以在 jquery 或 javascript 中完成吗？谢谢

Answer 1

如何为每个按钮添加一个公共类，例如：

<button class="next_prev pageNumberBtn" onclick="" id="first_buttons" disabled>{{ pages.first }}</button>

<button class="next_prev pageNumberBtn" onclick="" id="last_buttons" disabled>{{ pages.last }}</button>

如果最后页码为 1，则隐藏按钮：

if ($('#last_buttons').html() == '1') {
    $('.pageNumberBtn').hide();
}

Answer 2

使用类/ID 给出页长编号的包装器。例如：

<p id="num-of-pages"><span>{% get_pages %} {{ pages|length }} pages</span></p>

如果上面代码的输出只产生了一些数字，你可以使用下面的 jQuery 代码来隐藏按钮：

var numOfPages = $('#num-of-pages').text();

if (numOfPages <= 1 ){
    $('.next_prev').hide();
}

此处的小提琴示例：http: //jsfiddle.net/shodaburp/56kbj/

PS：只是一个提示 - 因为 .next_prev 是一个非常通用的名称，您可能已经将此类用于其他一些元素，最好为您想要隐藏的这两个按钮提供一些 ID。

更新（基于 user2032220 的第二条评论）：

如果{% get_pages %} {{ pages|length }}实际输出“Pages 1”，那么最简单的解决方案之一是将页面长度包装在另一个 span 标签中。例如：

<p id="num-of-pages"><span>{% get_pages %} <span>{{ pages|length }}</span></span></p>

然后隐藏按钮的代码将更改：

var numOfPages = $('#num-of-pages span span').text();

小提琴示例：http: //jsfiddle.net/shodaburp/56kbj/1/