Question

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

编辑：所以，我希望能够将鼠标滚轮移动到窗口的任何位置，这样就可以换回切换类.active。此外，当例如选择li＃runOne时，它应该运行一个回调函数，让我们说runFunctionOne。当li＃runTwo被选中/滚动到 - 它将运行例如runFunctionTwo ...

＆＃13;

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

＆＃13;

ul {
  margin: 50px auto;
  width: 300px;
}

.active {
  background-color: lightblue;
}

＆＃13;

<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>

＆＃13;

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 code：

<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;
 }
}

滚动时在数字和运行功能之间切换

2 个答案: