用鼠标滚轮选择列表元素

Question

我正在寻找选择的时候，听听鼠标滚轮，以便jquery只删除一个类并更改其类，然后等待下一个滚动，然后选择下一个并执行相同操作。但是我的代码正在全部选择并且一次更改类。

function scrollMe(){ 
    $('.header').on('mousewheel', function(e){ 
    e.preventDefault(); 
    var scrolled = e.originalEvent.wheelDelta; 
    if(scrolled < 0){ 
     $('li').each(function(i){ 
     if($('li').hasClass('no-show')){ 
      $('li').removeClass('no-show').addClass('is-visible'); 
     } 
     }); 
    } 
    }) 
} 

Answer 1

揭示每次滚动一个元素，知道滚动事件触发像每一个旋转10次...
你必须缓冲以某种方式的事件。

A setTimeout()可以与标志结合使用。
查看代码中的注释以获取详细信息。应提供downvote的

var timer; 
 

 
// This is a flag to know if we scrolled. 
 
var scrolling=false; 
 

 
$('.header').on('mousewheel', function(e){ 
 

 
    // Get the scrolling direction 
 
    var scrolled = e.originalEvent.wheelDelta; 
 

 
    if(scrolled < 0 && !scrolling){ // if scroll down for the first time for at least 1 second. 
 

 
    // Show the first hidden li found 
 
    $('li.no-show').first().removeClass('no-show').addClass('is-visible'); 
 
    } 
 

 
    // As long as user scrolls, 
 
    // he clears the timer 
 
    clearTimeout(timer); 
 

 
    // and sets a new one (delaying more...). 
 
    timer = setTimeout(function(){ 
 

 
    // After at least 1 second not scrolling, reset the flag. 
 
    scrolling=false; 
 
    },1000); 
 

 
    // Set the flag to know we just scrolled. 
 
    scrolling=true; 
 

 
});

.header{ 
 
    height:300px; 
 
    background-color:#ddd; 
 
    overflow-y:scroll; 
 
} 
 
.no-show{ 
 
    display:none; 
 
} 
 
.is-visible{ 
 
    display:list-item; 
 
    color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="header"> 
 
    <ul> 
 
    <li>1</li> 
 
    <li class="no-show">2</li> 
 
    <li>3</li> 
 
    <li class="no-show">4</li> 
 
    <li>5</li> 
 
    <li class="no-show">6</li> 
 
    <li>7</li> 
 
    <li class="no-show">8</li> 
 
    <li>9</li> 
 
    <li class="no-show">10</li> 
 
    </ul> 
 
</div>

Answer 2

在循环中，您正在控制任何没有显示类的'li'元素。通过执行下面的更改，它将查找每个“li”元素并为每个元素执行处理。

function scrollMe(){ 
$('.header').on('mousewheel', function(e){ 
    e.preventDefault(); 
    var scrolled = e.originalEvent.wheelDelta; 
    if(scrolled < 0){ 
     $('li').each(function(i){ 
      if($(this).hasClass('no-show')){ 
      $(this).removeClass('no-show').addClass('is-visible'); 
      }}); 
    } 
}) 
}