在数字之间切换并在滚动上运行函数

Question

如何在单击和滚动时在这些数字之间切换类？所以，基本上我想在旋转鼠标滚轮时在它们之间切换，然后在那之后触发某种回调…

编辑:因此，我希望能够将鼠标滚轮移动到窗口中的任何位置，这将在li中切换类.active。另外，当选择li#runOne时，它应该运行一个回调函数，比如runFunctionOne。当li#runTwo被选择/滚动到时-它将运行例如runFunctionTwo...

​

$("#runTwo").on('click', function() {
  $("#runTwo").toggleClass("active", function() {
    // Run some callback
    console.log("Two");
  });
});

$(window).scroll(function() {
  // Switch between numbers on scroll
});

ul {
  margin: 50px auto;
  width: 300px;
}

.active {
  background-color: lightblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li id="runOne" class="runOne active">Run 1</li>
  <li id="runTwo" class="runTwo">Run 2</li>
  <li id="runThree" class="runThree">Run 3</li>
</ul>

​

Answer 1

您可以使用单击和鼠标滚轮切换类，如下所示

https://codepen.io/creativedev/pen/rKOBEq

$('.rr').on('click, mousewheel', function() {
          $('.rr').removeClass('active');
         $(this).addClass('active');
            console.log("Two");
});

Answer 2

HTML代码：

<ul>
   <li id="runOne" class="runOne active list">Run 1</li>
   <li id="runTwo" class="runTwo list">Run 2</li>
   <li id="runThree" class="runThree list">Run 3</li>
</ul>

jQuery代码：

$('.list').click(function(e){
  $('.list.active').removeClass('active');
  $(this).addClass('active').trigger('activeEvent');
});
$(document).on('mousewheel',function(e){
  var currentScrollAmt=$(window).scrollTop();
  var activeLi=$('.list.active');
   $('.list.active').removeClass('active');

  if(e.originalEvent.wheelDelta /120 > 0) {
       //Scrolling Up
   if(!activeLi.is(':first-child'))
      activeLi.prev('li').addClass('active').trigger('activeEvent');
    }
    else{
        //Scrolling Down
      if(!activeLi.is(':last-child'))
      activeLi.next('li').addClass('active').trigger('activeEvent');
    }  
});
$('li').on('activeEvent',function(e){
 runCallback(e.target.id);
});
function runCallback(id)
{
  if(!id)
    return false;
  switch(id)
  {
     case 'runOne':
       alert('runOne Callback Code');
       break;
     case 'runTwo':
       alert('runTwo Callback Code');
       break;
     case 'runThree':
        alert('runThree Callback Code');
         break;
 }
}