JQUERY如何实现点击按钮，在当前页变为最后一页的时候隐藏。
本文介绍了JQUERY如何实现点击按钮，在当前页变为最后一页的时候隐藏。的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
代码如下：
JQUERY
var inner=0;
var outer=0;
$('.novel-item li').eq(0).addClass('cur');
$('.novel-item li').click(function() {
inner = $(this).index();
outer = $(this).parents('.item-list').index('.item-list');
display();
});
$('.btn1').click(function(){
$('.item-list li').removeClass('cur');
$('.item-list li').eq(inner).addClass('cur');
$('.btn2').prop('disabled',false);
inner--;
if(inner<0){
outer--;
if(outer<0){
outer++;
inner++;
$(this).prop('disabled',true);
return;
}
var aa=$('.nc-txt').eq(outer).find('.nc-content').length;
inner=aa-1;
display();
}else{
display();
}
});
$('.btn2').click(function(){
$('.btn1').prop('disabled',false);
var aa=$('.nc-txt').eq(outer).find('.nc-content').length;
inner++;
if(inner==aa){
outer++;
if(outer==$('.nc-txt').length){
outer--;
inner--;
$(this).prop('disabled',true);
return;
}
inner=0;
display();
}else{
display();
}
});
function display(){
$('.novel-txt .nc-txt').css('display', 'none').eq(outer).css('display', 'block');
$('.novel-txt .nc-content').css('display', 'none');
$('.novel-txt .nc-txt').eq(outer).find('.nc-content').eq(inner).css('display', 'block');
}HTML
按钮：
<div class="btn1">上一章</div>
<div class="btn2">下一章</div>
目录：
<div class="novel-item">
<h1>第一卷 卷名</h1>
<div class="item-list">
<ul>
<li>章节名称1</li>
<li>章节名称2</li>
<li>章节名称3</li>
</ul>
</div>
<h1>第二卷 卷名</h1>
<div class="item-list">
<ul>
<li>章节名称1</li>
</ul>
</div>
<h1>第三卷 卷名</h1>
<div class="item-list">
<ul>
<li>章节名称1</li>
</ul>
</div>
</div>
<!--以上代码为目录-->
内容：
<div class="novel-txt">
<div class="novel">
<div class="nc-txt">
<h1>第一卷 卷名</h1>
<div class="nc-content">
<i>章节名称1</i><br> 章节内容1
</div>
<div class="nc-content" style="display: none;">
<i>章节名称2</i><br> 章节内容2
</div>
<div class="nc-content" style="display: none;">
<i>章节名称3</i><br> 章节内容3
</div>
</div>
<div class="nc-txt" style="display: none;">
<h1>第二卷 卷名</h1>
<div class="nc-content" style="display: none;">
<i>章节名称1</i><br> 章节内容1
</div>
</div>
<div class="nc-txt" style="display: none;">
<h1>第三卷 卷名</h1>
<div class="nc-content" style="display: none;">
<i>章节名称1</i><br> 章节内容1
</div>
</div>
</div>
</div>
<!--以上代码为文章内容-->以上代码实现的内容是点击目录里的LI，显示对应内容里的卷和章节，并且给目录里的li添加cur样式。并且点击上一页和下一页按钮可以切换显示内容里的上一页和下一页。
问题是，点击上一页和下一页按钮无法给目录里对应的LI添加cur class，请问如何解决呢？还有一个问题是，当前的代码在点按钮下一页到最后一页时再点一次才能隐藏，不能点到倒数第二页的时再点下一页隐藏。上一页也是相同问题，请问如何实现使点击下一页时到倒数第二页再点就隐藏下一页按钮，上一页在第二页点击上一页时隐藏上一页按钮呢？我的JQUERY不是特别好，所以弄了很长时间也没弄出来，还望您能够给予帮助，非常感谢！~
解决方案
// 我能说我闲得慌，重写了一份么。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>文章</title>
<script id="jquery_182" type="text/javascript" class="library" src="http://runjs.cn/js/sandbox/jquery/jquery-1.8.2.min.js"> </script>
<style>
body{
color: #666;
}
.cur {
color: red;
}
li, button {
cursor: pointer;
}
button:disabled {
cursor: not-allowed;
}
</style>
</head>
<body>
按钮：
<button class="btn1" disabled="true">上一章</button>
<button class="btn2">下一章</button>
目录：
<div class="novel-item">
<dl>
<dt>书名</dt>
<dd>
<h1 class="cur">第一卷 卷名</h1>
<ul>
<li class="cur">章节名称1-1</li>
<li>章节名称1-2</li>
<li>章节名称1-3</li>
</ul>
</dd>
<dd>
<h1>第二卷 卷名</h1>
<ul>
<li>章节名称2-1</li>
<li>章节名称2-2</li>
<li>章节名称2-3</li>
</ul>
</dd>
<dd>
<h1>第三卷 卷名</h1>
<ul>
<li>章节名称3-1</li>
<li>章节名称3-2</li>
<li>章节名称3-3</li>
</ul>
</dd>
</dl>
</div>
<!--以上代码为目录-->
内容：
<div class="novel-txt" id="novelTxt">
<h1>第一卷 卷名</h1>
<ul>
<li>章节名称1</li>
</ul>
</div>
<!--以上代码为文章内容-->
<script>
let outerIdx = 0; // 卷
let index = 0; // 章节
let ul = $(".novel-item").find("ul");
let li = $(".novel-item").find("li");
let h1 = $(".novel-item").find("h1");
// 找到当前cur所在ul, li
function findIdx (flag) {
ul.each(function (oidx) {
$(this).find("li").each(function (idx) {
if ($(this).hasClass("cur")) {
index = idx;
outerIdx = oidx;
flag = true;
return false;
}
})
if (flag) {
return false;
}
});
}
// 显示cur内容
function novelTxt (curUl, curLi) {
let str = '<h1>' + h1.eq(curUl).text() +'</h1>\
<ul>\
<li>' + ul.eq(curUl).find("li").eq(curLi).text() + '</li>\
</ul>';
$("#novelTxt").html(str);
}
// 按钮处理
function hideBtn (btn1, btn2) {
if (btn1) {
$(".btn1").attr("disabled", true);
} else {
$(".btn1").attr("disabled", false);
}
if (btn2) {
$(".btn2").attr("disabled", true);
} else {
$(".btn2").attr("disabled", false);
}
}
$(document).on("click", "li", function () {
// 点击li事件
index = $(this).index();
outerIdx = $(this).parents("dd").index() - 1;
li.removeClass("cur");
ul.eq(outerIdx).find("li").eq(index).addClass("cur");
h1.removeClass("cur").eq(outerIdx).addClass("cur");
hideBtn(index <= 0 && outerIdx <= 0, outerIdx >= ul.length - 1 && index >= ul.eq(outerIdx).find("li").length - 1);
novelTxt(outerIdx, index);
}).on("click", ".btn1", function () {
// 点击上一章
if ($(this).attr("disabled")) {
return false;
}
let flag = false;
findIdx(flag);
li.removeClass("cur");
let curUl = outerIdx;
let curLi = 0;
if (index > 0) {
curLi = index - 1;
ul.eq(curUl).find("li").eq(curLi).addClass("cur");
}
else {
curUl = outerIdx-1;
curLi = ul.eq(curUl).find("li").length - 1;
ul.eq(curUl).find("li").eq(curLi).addClass("cur");
h1.removeClass("cur").eq(curUl).addClass("cur");
}
hideBtn(curUl<= 0 && curLi <= 0, false);
novelTxt(curUl, curLi);
}).on("click", ".btn2", function () {
// 点击下一章
if ($(this).attr("disabled")) {
return false;
}
let flag = false;
findIdx(flag);
li.removeClass("cur");
let curUl = outerIdx;
let curLi = 0;
if (index >= ul.eq(curUl).find("li").length - 1) {
curUl = outerIdx + 1;
ul.eq(curUl).find("li").eq(0).addClass("cur");
h1.removeClass("cur").eq(curUl).addClass("cur");
}
else {
curLi = index + 1;
ul.eq(curUl).find("li").eq(curLi).addClass("cur");
}
hideBtn(false, curUl>= ul.length-1 && curLi >= ul.eq(curUl).find("li").length - 1);
novelTxt(curUl, curLi);
});
</script>
</body>
</html>这篇关于JQUERY如何实现点击按钮，在当前页变为最后一页的时候隐藏。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
