如何在纯JavaScript中每次点击选择循环中的下一个特定数量的元素？ [英] How to select next specific number of elements in loop by every click in pure javascript?

问题描述

我试图选择接下来的3个项目（nextElementSiblings），每次点击下一步按钮。项目长度为14，其工作状态良好，直到项目12。项目12后，检查下3项目，但只剩下2（13 13，13 14）循环。所以它无法选择最后2个项目。当在循环结束时项目数量少于3时，如何更改条件。当next按钮到达结束时禁用onclick功能。点击'prev'按钮后启用它。

var next = document .getElementById（next），list = document.getElementById（list）; var li = list.getElementsByTagName（DIV）; for（var i = 0; i

< div id = 列表 > < DIV>一个1<&div> < DIV>两个2< div> < DIV>三个3< div> < DIV>四个4< / div> < DIV>五个5< / div> < DIV>六6< / div> < DIV>七个7< / div> < DIV>八8< / div> < DIV>九9< / div> < DIV> 10 10< div> < DIV> 11 11< / div> < DIV>十二12< / div> < DIV>十三13< / div> < DIV> < / div>< / div>< / div>< button id =prevonclick =prevfun（）> PREVIOUS 3< / button>< button id =nextonclick =nextfun（）> ; NEXT 3

解决方案

我建议只使用一个变量来标记项目的开始，并检查项目是否在标记为红色的inverval。

 < div id =list>< / c $ c>  
 

< var i，li = list.getElementsByTagName（DIV），l = li.length; document.getElementById（'prev'）。disabled = index< = 0; document.getElementById（'next'）。disabled = index + count> = 1;对于（i = 0; i <1; i ++）{li [i] .style.border = i> = index&&我<指数+ 3？ 1px纯红：0px纯透明; }} 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>一个1< / div>< div>两个2< div>< div>三个3< div>< div>四个4< / div>< div>五个5< div>< div>六个6< div>< div>七个7< / div>< div>八8< / div> < DIV> 9 9< / div>< div> 10 10< div>< div>十一11< / div>< div> 12 12< / div>< div>十三13< / div>< div> 14

< / div>< button id =prevonclick =button.prev（）> PREVIOUS 3< / button>< button id =nextonclick =button.next （）> NEXT 3< / button>

I'm trying to select next 3 items(nextElementSiblings) for every click on 'next' button. Items length is 14. Its working fine till item 12. After item 12 its checking for next 3 items but there were only 2 left(thirteen 13, thirteen 14) in loop. So its unable to select last 2 items. How can I change the condition here when items left less than 3 at the end of the loop. And disable the onclick function on 'next' button as it reached till end. And enable it after clicking on 'prev' button.

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>

解决方案

I suggest to use only one variable for the start of the marked items and check if the item is in the inverval for marking red or not.

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>

A slightly better version with encapsulation for the buttons.

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中每次点击选择循环中的下一个特定数量的元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！