Показать 5 div на странице прокрутки в JQuery

jquery

45 просмотра

2 ответа

1433 Репутация автора

У меня есть 10 дел на моей странице. 1-й div видим, а другие скрыты.

div1,div2,div3----div10

На странице прокрутки хочу показать 5 дел.

div2----div6
div7---div12 (div12 not exist. I know but just want to show you limit)

и на второй странице прокрутки страницы я хочу показать 5 делений снова, и это произойдет снова, если будет более 10 делений .

total_data = 10
limit= 5
....Page scroll code comes here.....
for(i =1; i<=limit; i++)
div show i;
total_data= total_data +1
}

Пожалуйста, не бойтесь опечаток, я ищу только логику. Я напишу чистый код.

Автор: Ironic Источник Размещён: 18.07.2016 09:15

Ответы (2)


1 плюс

147 Репутация автора

Решение

Я бы сделал это так (как вы и просили, это просто идея для кода):

var scrollTimes = 0; 
$('body').on('scroll',function(){
 scrollTimes++; //also add if statement when the scroll times reaches maximum to restart
 var limit = scrollTimes + 5;
 for(i = scrollTimes; i<=limit; i++)
   var x = i+5;
   div show x; //example $('#div' + x).show();
 } 
});

Я надеюсь, это поможет вам начать.

Автор: Tezekiel Размещён: 18.07.2016 09:29

1 плюс

2013 Репутация автора

Я не проверял ничего из этого. Но я надеюсь, что вы понимаете суть этого. Я придумал что-то в этом роде.

var arrayOfDivs = $(".divs"); // divs to appear/disappear
var currentlyShownDivs = 1; // shown divs upon loading page
//optionally make the code more flexible by adding a variable for the no of divs to show.

$(body).scroll(function(){
//if function to detect scrollup or scrolldown
    //on scrolldown
    arrayOfDivs.hide();
    for(i=0; i<5 ;i++){
        if(i+currentlyShownDivs > arrayOfDivs.length){//stop code when scrolling too far
            break;
        }
        if(i+currentlyShownDivs < arrayOfDivs.length){ //don't run the code if divs to display do not exist
            arrayOfDivs.eq(i+currentlyShownDivs).show(); // show the next 5 divs one by one
        }
        if(i+currentlyShownDivs = arrayOfDivs.length || i=4){
            currentlyShownDivs += 5;//one time increment to enable the code to run for the next 5 divs.
        }
    }
    //on scrollup
        //simular code to do the opposite from scrolldown.
});
Автор: RMo Размещён: 18.07.2016 10:39
Вопросы из категории :
32x32