我试图为每次单击“下一步”按钮选择接下来的 3 个项目（nextElementSiblings）。项目长度为 14。直到项目 12 为止它都工作正常。在项目 12 之后，它检查接下来的 3 个项目，但循环中只剩下 2 个项目（十三个 13、十三个 14）。所以它无法选择最后 2 项。当循环结束时剩余的项目少于 3 时，如何更改此处的条件。并在“下一步”按钮到达结束时禁用 onclick 功能。并在单击“上一个”按钮后启用它。
var next = document.getElementById("next"),
list = document.getElementById("list");
var li = list.getElementsByTagName("DIV");
for (var i = 0; i < li.length; i++) {
li[i].style.display = "0px solid transparent";
}
for (var i = 0; i < 3; i++) {
li[i].style.border = "1px solid red";
}
var nextfun = (function(){
var nextitems = 4;
var prevItems = 1;
return function(){
nextitems = nextitems + 2;
prevItems = nextitems - 3;
for (var i = 0; i < nextitems; i++) {
li[i].style.border = "1px solid red";
if(nextitems >= li.length){
li[i].style.border = "1px solid red";
//nextitems = 2;
break;
//this.pointerEvents = "none";
}
}
for (var i = 0; i < prevItems; i++) {
li[i].style.border = "0px solid transparent";
if(prevItems <= li.length){
prevItems = nextitems - 3;
li[i].style.border = "1px solid transparent";
}
}
return ++nextitems;
//return --prevItems;
}
})();
<div id="list">
<div> one 1</div>
<div> two 2</div>
<div> three 3</div>
<div> four 4</div>
<div> five 5</div>
<div> six 6</div>
<div> seven 7</div>
<div> eight 8</div>
<div> nine 9 </div>
<div> ten 10</div>
<div> eleven 11</div>
<div> twelve 12</div>
<div> thirteen 13</div>
<div> fourteen 14</div>
</div>
<button id="prev" onclick="prevfun()">PREVIOUS 3</button>
<button id="next" onclick="nextfun()">NEXT 3</button>
我建议仅使用一个变量作为标记项目的开头，并检查该项目是否在标记为红色的 inverval 中。
var next = document.getElementById("next"),
list = document.getElementById("list"),
li = list.getElementsByTagName("DIV"),
i,
nextfun = (function () {
var item = 3;
return function () {
for (var i = 0; i < li.length; i++) {
li[i].style.border = i >= item && i < item + 3 ? "1px solid red" : "0px solid transparent";
}
item += 3;
}
})();
for (i = 0; i < li.length; i++) {
li[i].style.border = "0px solid transparent";
}
for (var i = 0; i < 3; i++) {
li[i].style.border = "1px solid red";
}
<div id="list"><div> one 1</div><div> two 2</div><div> three 3</div><div> four 4</div><div> five 5</div><div> six 6</div><div> seven 7</div><div> eight 8</div> <div> nine 9 </div><div> ten 10</div><div> eleven 11</div><div> twelve 12</div><div> thirteen 13</div><div> fourteen 14</div></div>
<button id="prev" onclick="prevfun()">PREVIOUS 3</button>
<button id="next" onclick="nextfun()">NEXT 3</button>
稍微好一点的版本，带有按钮封装。
function Button(count) {
function setBorder() {
var i,
li = list.getElementsByTagName("DIV"),
l = li.length;
document.getElementById('prev').disabled = index <= 0;
document.getElementById('next').disabled = index + count >= l;
for (i = 0; i < l; i++) {
li[i].style.border = i >= index && i < index + 3 ? "1px solid red" : "0px solid transparent";
}
}
var index = 0;
this.next = function () {
index += count;
setBorder();
};
this.prev = function () {
index -= count;
setBorder();
};
setBorder();
}
var button = new Button(3);
<div id="list"><div> one 1</div><div> two 2</div><div> three 3</div><div> four 4</div><div> five 5</div><div> six 6</div><div> seven 7</div><div> eight 8</div> <div> nine 9 </div><div> ten 10</div><div> eleven 11</div><div> twelve 12</div><div> thirteen 13</div><div> fourteen 14</div></div>
<button id="prev" onclick="button.prev()">PREVIOUS 3</button>
<button id="next" onclick="button.next()">NEXT 3</button>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
