告诉哪个<li>是可访问的Scrollbox.js

Question

当您从下拉列表中选择项目时，我使用scrollbox.js创建一个滚动体，就像您在iPhone上发现的那样。

http://wmh.github.io/jquery-scrollbox/

我有它，以便文本滚动正确，但我想根据他们的位置，他们在滚动体的风格。

HTML:

<div id="rollerSelector"  class="scroll-text">
      <ul>
          <li>Selection 1</span></li>
          <li>Selection 2</li>
          <li>Selection 3</li>
          <li>Selection 4</li>
          <li>Selection 5</li>
          <li>Selection 6</li>
          <li>Selection 7</li>
          <li>Selection 8</li>
          <li>Selection 9</li>
          <li></li>
      </ul>
</div>

<div id="backwardBtn"></div>
<div id="forwardBtn"></div>

jQuery

$('#rollerSelector').scrollbox({
    linear: true,
    delay: 0,
    speed: 60,
    autoPlay: false,
    onMouseOverPause: false,
    switchAmount: 1,
    distance: 42,
});

var myInterval = false;
$('#backwardBtn').mouseover(function(){
    $('#rollerSelector').trigger('backward');
    myInterval = setInterval(function(){
       $('#rollerSelector').trigger('backward');
    }, 1000);
}).mouseout(function() {
   clearInterval(myInterval);
   myInterval = false;
});
$('#forwardBtn').mouseover(function(){
    $('#rollerSelector').trigger('forward');
    myInterval = setInterval(function(){
       $('#rollerSelector').trigger('forward');
    }, 1000);
}).mouseout(function() {
   clearInterval(myInterval);
   myInterval = false;
}); 

我把它设置好了，10 < li >中的5个显示出来，其余的被隐藏起来。我需要样式的第一和第二项在列表中是可见的。

我试着做这样的事：

$("#rollerSelector li:visible:first-child").addClass("rollerFirst");
$("#rollerSelector li:visible:nth-child(2)").addClass("rollerSecond");

但是它总是样式前两个< li >，即使我已经向下滚动列表和第一个< li >可见是选项4

Answer 1

如果您打算将这些类应用于每个出现的可见li元素，请尝试使用odd/even选择器而不是child。

$("#rollerSelector li:visible:odd").addClass("rollerFirst");
$("#rollerSelector li:visible:even").addClass("rollerSecond");

示例：https://jsfiddle.net/DinoMyte/53m6z2ec/1/

Answer 2

我想通了。我在查看Firebug并注意到插件正在重新排序< li >元素。

我添加了以下代码：

$('#rollerSelector li:first-child').addClass('rollerFirst');
$('#rollerSelector li:nth-child(2)').addClass('rollerSecond');

作为我演讲活动的一部分。这是完整的代码。

var myInterval = false;
$('#backwardBtn').mouseover(function(){
    $('#rollerSelector').trigger('backward');
    myInterval = setInterval(function(){
       $('#rollerSelector').trigger('backward');
    }, 1000);
}).mouseout(function() {
   clearInterval(myInterval);
   myInterval = false;
    $('#rollerSelector li:first-child').addClass('rollerFirst');
    $('#rollerSelector li:nth-child(2)').addClass('rollerSecond');
});

这样，每当用户停止移动选择器时，它就会为新的前两个元素设置样式。我需要调整代码，以便在类不再位于前两个位置时删除它们，但这是基本思想。