仅当使用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/