Question

当您从下拉列表中选择项目时，我正在使用scrollbox.js创建一个类似于iPhone上的滚动条。

我有它，以便文本正确滚动，但我想根据它们在滚动条中的位置来设置它们的样式。

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个中的5个＆lt; li>正在展示，其余的都是隐藏的。我需要设置列表中可见的第一个和第二个项目的样式。

我尝试过这样的事情：

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

但它只是总是前两个＆lt; li>即使我已经向下滚动列表和第一个＆lt; 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并注意到该插件正在重新排序＆lt; li>元件。

我添加了以下代码：

> set.seed(1)
> a<-matrix(sample(1:10,100,replace=T),1000,1000)
> system.time(res1<-af(a))
   user  system elapsed
  4.680   0.000   4.683
> system.time(res2<-t(apply(a,1,function(x){ y<-rle(x); y[[2]][y[[1]]==1]<-0; rep(y[[2]],y[[1]]) })))
   user  system elapsed
  0.188   0.036   1.118
> all.equal(res1,res2)
[1] TRUE

作为我的鼠标悬停事件的一部分。这是完整的代码。

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

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

告诉哪些<li>可见Scrollbox.js

2 个答案: