scrollable获取item的当前值 [英] scrollable get current value of item
问题描述
我有一个可滚动的工作样本，项目编号1 - 24我想获得当前项目的价值，但我失败了。我试着去警戒但是不工作怎么做呢这是我的代码
i have a working sample of scroll-able with item number 1 - 24 i want to get the value of the current item but i failed.i tried doing it to alert but its not working how does one do it this is my code
更新问题：
i能够获得可滚动值的索引现在我的问题是我无法找到获取每个索引值的方法在下面的代码中获取索引值的任何方法？
UPDATE QUESTION: i was able to get the index of the value of the scrollable now my problem is i cant find way to get the value of every index any way to get value of index in my code below?
更新：
<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的确切值任何建议？
i added this on my js its working now but its output is just UP and DOWN i cant find a way to get the exact value of the div any suggestions?
<!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>
推荐答案
不要使用鼠标滚轮事件。而是使用可滚动的 onSeek 方法。这是一个工作示例，代码如下所示： http://jsfiddle.net/bluegeek9bluegeek9/b5xn5/
Do not use the mousewheel event. Instead use the onSeek method of scrollable. Here is a working example, with the code shown below: 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());
}
});
});
这篇关于scrollable获取item的当前值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
