可滚动获取项目的当前值答案

【问题标题】：scrollable get current value of item可滚动获取项目的当前值
【发布时间】：2013-12-24 16:02:47
【问题描述】：

我有一个可滚动的工作样本，项目编号为 1 - 24 我想获取当前项目的值但我失败了。我尝试这样做以提醒但它不起作用如何做到这一点这是我的代码

更新问题：我现在能够获取可滚动值的索引我的问题是我无法找到获取每个索引值的方法以任何方式在下面的代码中获取索引值？

更新：

<script>
$(function() {
    // initialize scrollable with mousewheel support
    $(".scrollable").scrollable({ vertical: true, mousewheel: true });   
    $('#scroll').bind('mousewheel', function(e){
        if(e.originalEvent.wheelDelta < 0) {
            //scroll down
            console.log('Down');
            alert('Down');
        }else {
            //scroll up
            console.log('Up');
            alert('Up');
        }

        //prevent page fom scrolling
        return false;
    });
}); 
</script>

我在我的 js 上添加了它，它现在可以工作，但它的输出只是 UP 和 DOWN 我找不到获得 div 确切值的方法有什么建议吗？

<!DOCTYPE html>
<html>
  <title>scroll</title>

    <!-- include the Tools -->
  <script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>

<style type="text/css">
  /* root element for scrollable */
  .scrollable {

  /* required settings */
  position:relative;
  overflow:hidden;

  /*
  vertical scrollables have typically larger height than width but
  not now
  */
  height: 17px;
  width: 700px;
  }

  /* root element for scrollable items */
  .scrollable .items {
  position:absolute;

  /* this time we have very large space for the height */
  height:20em;
  }
</style>
</head>
<body>

<!-- root element for scrollable -->
<div id="scroll" class="scrollable vertical">

  <!-- root element for the items -->
    <div class="items" style="top: 0px;">

        <div>

            <div class="item">
                1

            </div>
        </div>
        <div>
            <div class="item">
                2

            </div>
        </div>
        <div>
            <div class="item">
                3

            </div>
        </div>
        <div>

            <div class="item">
                4

            </div>
        </div>
        <div>
            <div class="item">
                5

            </div>
        </div>
        <div>
            <div class="item">
                6

            </div>
        </div>
        <div>
            <div class="item">
                7

            </div>
        </div>
        <div>
            <div class="item">
                8

            </div>
        </div>
        <div>
            <div class="item">
                9

            </div>
        </div>
        <div>
            <div class="item">
                10

            </div>
        </div>
        <div>
            <div class="item">
                11

            </div>
        </div>
        <div>
            <div class="item">
                12

            </div>
        </div>

        <div>

            <div class="item">
                13

            </div>
        </div>
        <div>
            <div class="item">
                14

            </div>
        </div>
        <div>
            <div class="item">
                15

            </div>
        </div>
        <div>

            <div class="item">
                16

            </div>
        </div>
        <div>
            <div class="item">
                17

            </div>
        </div>
        <div>
            <div class="item">
                18

            </div>
        </div>
        <div>
            <div class="item">
                19

            </div>
        </div>
        <div>
            <div class="item">
                20

            </div>
        </div>
        <div>
            <div class="item">
                21

            </div>
        </div>
        <div>
            <div class="item">
                22

            </div>
        </div>
        <div>
            <div class="item">
                23

            </div>
        </div>
        <div>
            <div class="item">
                24

            </div>
        </div>      
    </div>
  </div>


<!-- javascript coding -->
<script>
$(function() {
    // initialize scrollable with mousewheel support
    $(".scrollable").scrollable({ vertical: true, mousewheel: true });

});
</script>


</body></html>

【问题讨论】：

什么时候想获得价值？滚动完成后？
例如值是 1 然后我滚动一个所以它的 2 现在我想获得 2 的值我试试这个但 Eclipse 不会保存 $(function() { $(".scrollable"). scrollable({ vertical: true, mousewheel: true }); .navigator() .autoscroll({ interval: 3000, autoplay: false }) .timeout(function(){ $(this).data(".scrollable"). play(); }, 800); $.fn.timeout = function(fn, delay){ var self = this; setTimeout(function(){ self.each(function(){ fn.call(this); } ); }, 延迟); 返回这个; }; });
错误的 jquey 代码。 “.navigator() .autoscroll”是什么意思？
实际上我不知道我只是在这里找到它并尝试了它，我是一个新程序员:)
@satinekianne, this page 解释了如何获取可滚动的当前元素的索引

标签： jquery css jquery-ui jquery-plugins

【解决方案1】：

不要使用mousewheel 事件。而是使用可滚动的onSeek 方法。这是一个工作示例，代码如下所示：http://jsfiddle.net/bluegeek9bluegeek9/b5xn5/

$(document).ready(function() {

  $(".scrollable").scrollable({ 
    vertical   : true,
    mousewheel : true,
    onSeek     : function(){
       console.info("current position is: " + this.getIndex());
       console.info('current value is:', $('#scroll div.items > div:nth-child(' + (this.getIndex()+1) + ') > div.item').text());
    }
  });   

});

Reference

【讨论】：

我可以得到索引伴侣问题是我想要得到的值不是你知道的索引吗？
那真的很酷，但是当我没有 1 没有价值时，价值都是错误的，当我在 2 时价值是 1 但我想我可以解决这个问题，谢谢我该怎么办调整它？
让我们continue this discussion in chat