标签：javascript for-loop

我试图为“下一步”按钮上的每次点击选择下3个项目(nextElementSiblings).项的长度为14.在项12之前可以正常工作.在项12之后,可以检查接下来的3个项,但是循环中只剩下2个(13、13、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>

解决方法:

我建议仅使用一个变量作为标记项目的开头,并检查该项目是否处于标记为红色的范围内.

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>

标签：javascript,for-loop
来源： https://codeday.me/bug/20191013/1908808.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。