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/

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

2 个答案: